代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./flexible.js"></script>
<script src="./element.js"></script>
<script src="./bootstrap.js"></script>
<script src="./vue.js"></script>
<link rel="stylesheet" href="./elementui.css" />
<link rel="stylesheet" type="text/css" href="./common.css" />
<link rel="stylesheet" type="text/css" href="./bootstrap.css" />
<link rel="stylesheet" type="text/css" href="./index.css" />
<link rel="stylesheet" type="text/css" href="./news.css" />
<link rel="stylesheet" type="text/css" href="./zhengfuxinxigongkaineirong.css" />
</head>
<body>
<div class="page flex-col" id="app">
<!-- 头部 -->
<div class="head-top">
<div class="head-top-bg justify-around align-center">
<div class="head-top-text">
<span>
中央人民政府网站 | 省委 | 省人大 | 省政府 | 省政协
</span>
</div>
<div class="head-top-text-two">
<span> <span>设为首页</span>｜<span>加入收藏</span>｜无障碍阅读</span>
<img class="thumbnail_1" referrerpolicy="no-referrer"
src="./img/SketchPnga7e3bcd6e703db4b4febe17164540984fc3aec51a35f018220f4e09ad35a4186.png" />
<span class="text_3" id='shilao-open'>进入关怀版</span>
</div>
</div>
<div style="margin-bottom: 0.5rem;">
<div class="justify-between" style="width: 42.5rem;">
<div class="head_block_21 flex-row">
<img class="head_image_6" referrerpolicy="no-referrer"
src="./img/SketchPnga4358636872b912ee4cc5dc3e2fe245448bdaaf943b22d09e1ae3dc4edd13165.png" />
<div class="head_text-wrapper_71 flex-col justify-between">
<span class="head_text_5">三江源国家公园</span>
<span class="head_text_6">
THREE-RIVER-SOURCE NATIONAL PARK
</span>
</div>
</div>
<div class="" style="">
<div class="justify-end" style="margin: 1rem 0 0.6rem 0;">{{time}}</div>
<div class="input-group mb-3 justify-center " style="width: 14rem">
<input type="text" class="form-control" placeholder="请输入您要搜索的内容" />
<button type="button" class="btn btn-success" style="background-color: rgba(184, 0, 10, 1);"
data-bs-toggle="modal" data-bs-target="#myModal">搜索</button>
</div>
</div>
</div>
</div>
<div class="justify-between haed-menu-list">
<div v-for="(item,index) in menuList" :key="index" @mouseover="mouseOverEvent(index)">
<div class="justify-center">
<div :class="selecetMenuIndex == index ? 'head-select-index':'head-def-index'"><a href=""
:style="selecetMenuIndex == index ?'color:#b8000a':'color:#fff'">{{item}}</a></div> <img
src="./img/menu-border.png" alt="" style="margin-left: 0.35rem;">
</div>
</div>
</div>
<div class="menu-content">
<div v-if="selecetMenuIndex == 0" style="text-align:center">
欢迎您访问三江源国家公园官网，您在访问过程中对网站有任何意见或者建议请联系我们。
</div>
<div v-if="selecetMenuIndex == 1" style="margin-left: 5.5rem;">
<a href="./news.html">新闻中心</a> <span style="margin: 0 0.3rem;">|</span> <a href="">动态要闻</a>
</div>
<div v-if="selecetMenuIndex == 2" style="margin-left: 9.8rem;">
<a href="">走进公园</a>
</div>
<div v-if="selecetMenuIndex == 3" style="margin-left: 14rem;">
<a href="">政务互动</a> <span style="margin: 0 0.3rem;">|</span> <a href="">政务互动</a>
</div>
<div v-if="selecetMenuIndex == 4" style="margin-left:18.4rem;">
<a href="">互动交流</a> <span style="margin: 0 0.3rem;">|</span> <a href="">动态要闻</a>
</div>
<div v-if="selecetMenuIndex == 5" style="margin-left: 22.6rem;">
<a href="">公园视讯</a> <span style="margin: 0 0.3rem;">|</span> <a href="">动态要闻</a>
</div>
<div v-if="selecetMenuIndex == 6" style="margin-left: 27rem;">
<a href="">共建三江</a>
</div>
<div v-if="selecetMenuIndex == 7" class="justify-end" style="margin-right: 0.3rem;">
<a href="">专题专栏</a><span style="margin: 0 0.3rem;">|</span><a href="">专题专栏</a>
</div>
</div>
</div>
<!-- 左侧悬浮 -->
<div class="left-suspension">
<div class="text_19" v-show="isShow" @click="isShow = false">关闭</div>
<img v-show="isShow" style="width: 9rem;" referrerpolicy="no-referrer"
src="./img/SketchPng1e11307630d75ea88bb8e8ed1f45eb97aeea3a9be7f41ba371adfd0f75bdcf14.png" />
<div class="text_19" v-show="isShow2" @click="isShow2 = false">关闭</div>
<img v-show="isShow2" style="width: 9rem;" referrerpolicy="no-referrer"
src="./img/SketchPng5f24ec393aff651d5c3e4cd4597157d92782cc7b8444cad992d9c636d9eb4f8c.png" />
</div>
<div style="margin:0.6rem 0 0.6rem 8.3rem; width: 34.5rem;">
<div style=" background: linear-gradient(180deg, #FFFFFD 0%, #FFE6D2 100%);
border: 1px solid #F1BCB6;width: 34.5rem;padding: 0.1rem 0;margin-bottom:0.6rem ;">
<span class="text-group_6"><img src="./img/position.png" style="width: 23px; height: 26px" alt="" />
当前位置：互动交流</span><span>>留言查询</span>
</div>
<div class="justify-center" style="background-color: #FFDA82;padding: 0.5rem;">
<div class="input-group justify-center " style="width: 18rem">
<input type="text" class="form-control" placeholder="请输入您要搜索的内容" />
<button type="button" class="btn btn-success" style="background-color: rgba(184, 0, 10, 1);"
data-bs-toggle="modal" data-bs-target="#myModal">查询</button>
</div>
<div style="margin-left: 0.6rem;">
<button type="button" class="btn btn-success" style="background-color:#FD922D"
data-bs-toggle="modal" data-bs-target="#myModal"><a href=""
style="color: #fff;">我要留言</a></button>
</div>
</div>
<div style="border-bottom: 1px solid #F3C6C1;">
<div style="border-bottom: 2px solid #B8000A;width: 2.8rem;padding: 0.3rem;">
留言与回复
</div>
</div>
<div>
<div class=" flex-row" style="width: 33rem;border-bottom: 2px solid #E5E5E5;margin-left: 0.9rem;">
<a title=" 三江源国家公园3部作品 喜获青海省hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh“五个一工">
<div class="overflow-text" style="width: 27rem;padding: 0.4rem 0.4rem 0.4rem 0rem;font-weight: 600;">
标题:关于品种权种质资源查询相关问题的回
</div>
</a>
<span class="gonggong_time" style="margin-top: 0.5rem; margin-left: 3.7rem;">2023-03-12</span>
</div>
<div class="flex-row " style="margin-left: 0.8rem;">
<div class="hdjl_liuyantitle" style="margin-top: 0.3rem;">问</div>
<div class="hdjl_wenti flex-row" style="border: none;"><span style="color: #B8000A;"></span>
<a style="width: 13rem;">
您好，我有关注到国家林业草原局植物您好，我有关注到国家林业草原局植物您好，我有关注到国家林业草原局植物</a>
</div>
</div>
<div style="background: #CFCFCF; padding: 0.5rem 0.8rem;">
<div class="flex-row">
<div style="background: #B8000A;margin-right: 0.4rem;color: #fff;padding:0 0.1rem;width: 0.7rem;height: 0.6rem;">答</div>
<div style="width: 32rem;">您好，我有关注到国家林业草原局植物您好，我有关注到国家林业草原局植物您好，我有关注到国家林业草原局植物
您好，我有关注到国家林业草原局植物您好，我有关注到国家林业草原局植物您好，我有关注到国家林业草原局植物
您好，我有关注到国家林业草原局植物您好，我有关注到国家林业草原局植物您好，我有关注到国家林业草原局植物
</div>
</div>
<div class="justify-end">
2023-11-1 国家林业局
</div>
</div>
</div>
<div>
<div class=" flex-row" style="width: 33rem;border-bottom: 2px solid #E5E5E5;margin-left: 0.9rem;">
<a title=" 三江源国家公园3部作品 喜获青海省hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh“五个一工">
<div class="overflow-text" style="width: 27rem;padding: 0.4rem 0.4rem 0.4rem 0rem;font-weight: 600;">
标题:关于品种权种质资源查询相关问题的回
</div>
</a>
<span class="gonggong_time" style="margin-top: 0.5rem; margin-left: 3.7rem;">2023-03-12</span>
</div>
<div class="flex-row " style="margin-left: 0.8rem;">
<div class="hdjl_liuyantitle" style="margin-top: 0.3rem;">问</div>
<div class="hdjl_wenti flex-row" style="border: none;"><span style="color: #B8000A;"></span>
<a style="width: 13rem;">
您好，我有关注到国家林业草原局植物您好，我有关注到国家林业草原局植物您好，我有关注到国家林业草原局植物</a>
</div>
</div>
<div style="background: #CFCFCF; padding: 0.5rem 0.8rem;">
<div class="flex-row">
<div style="background: #B8000A;margin-right: 0.4rem;color: #fff;padding:0 0.1rem;width: 0.7rem;height: 0.6rem;">答</div>
<div style="width: 32rem;">您好，我有关注到国家林业草原局植物您好，我有关注到国家林业草原局植物您好，我有关注到国家林业草原局植物
您好，我有关注到国家林业草原局植物您好，我有关注到国家林业草原局植物您好，我有关注到国家林业草原局植物
您好，我有关注到国家林业草原局植物您好，我有关注到国家林业草原局植物您好，我有关注到国家林业草原局植物
</div>
</div>
<div class="justify-end">
2023-11-1 国家林业局
</div>
</div>
</div>
<div>
<div class=" flex-row" style="width: 33rem;border-bottom: 2px solid #E5E5E5;margin-left: 0.9rem;">
<a title=" 三江源国家公园3部作品 喜获青海省hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh“五个一工">
<div class="overflow-text" style="width: 27rem;padding: 0.4rem 0.4rem 0.4rem 0rem;font-weight: 600;">
标题:关于品种权种质资源查询相关问题的回
</div>
</a>
<span class="gonggong_time" style="margin-top: 0.5rem; margin-left: 3.7rem;">2023-03-12</span>
</div>
<div class="flex-row " style="margin-left: 0.8rem;">
<div class="hdjl_liuyantitle" style="margin-top: 0.3rem;">问</div>
<div class="hdjl_wenti flex-row" style="border: none;"><span style="color: #B8000A;"></span>
<a style="width: 13rem;">
您好，我有关注到国家林业草原局植物您好，我有关注到国家林业草原局植物您好，我有关注到国家林业草原局植物</a>
</div>
</div>
<div style="background: #CFCFCF; padding: 0.5rem 0.8rem;">
<div class="flex-row">
<div style="background: #B8000A;margin-right: 0.4rem;color: #fff;padding:0 0.1rem;width: 0.7rem;height: 0.6rem;">答</div>
<div style="width: 32rem;">您好，我有关注到国家林业草原局植物您好，我有关注到国家林业草原局植物您好，我有关注到国家林业草原局植物
您好，我有关注到国家林业草原局植物您好，我有关注到国家林业草原局植物您好，我有关注到国家林业草原局植物
您好，我有关注到国家林业草原局植物您好，我有关注到国家林业草原局植物您好，我有关注到国家林业草原局植物
</div>
</div>
<div class="justify-end">
2023-11-1 国家林业局
</div>
</div>
</div>
</div>
<!-- 左侧悬浮 -->
<!-- <div class="left-suspension">
<div class="text_19" v-show="isShow" @click="isShow = false">关闭</div>
<img v-show="isShow" style="width: 9rem;" referrerpolicy="no-referrer"
src="./img/SketchPng1e11307630d75ea88bb8e8ed1f45eb97aeea3a9be7f41ba371adfd0f75bdcf14.png" />
<div class="text_19" v-show="isShow2" @click="isShow2 = false">关闭</div>
<img v-show="isShow2" style="width: 9rem;" referrerpolicy="no-referrer"
src="./img/SketchPng5f24ec393aff651d5c3e4cd4597157d92782cc7b8444cad992d9c636d9eb4f8c.png" />
</div> -->
<!-- 中间 -->
<!-- 中间右侧图标模块 -->
<div class="home-right-content">
<div class="text-wrapper_16 flex-col" style="
background: url(./img/SketchPnga2a2a6a9bfbb014a5fa4e03abfb48c3be001d2ab763488399b1d505a4e24a8cf.png)
100% no-repeat;
background-size: 100% 100%;
">
<span class="text_43">欢迎您点击我进入三江源国家公园数字展厅</span>
</div>
<img class="image_15" referrerpolicy="no-referrer"
src="./img/SketchPng38f7e63f81f623beab6b82613ff6f784090c89970fa30947e95af70813a3ff79.png" />
<div class="box_24 flex-col">
<div class="box_25 flex-col"></div>
<div class="box_26 flex-row justify-between">
<div class="group_9 flex-col" v-if="rightIconData.selectIndex == 1">
<span class="text_71">三江源微信</span>
<img class="image_5" referrerpolicy="no-referrer"
src="./img/SketchPng7e8f14fec2a82c205cef6b28e99bd207ca3feca9f8c5c9f95809747023228df4.png" />
</div>
<div class="group_9 flex-col" v-if="rightIconData.selectIndex == 2" style="margin-top: 1rem">
<span class="text_71">三江源微博</span>
<img class="image_5" referrerpolicy="no-referrer"
src="./img/SketchPng7e8f14fec2a82c205cef6b28e99bd207ca3feca9f8c5c9f95809747023228df4.png" />
</div>
<div class="group_9 flex-col" v-if="rightIconData.selectIndex == 3" style="margin-top: 2.2rem">
<span class="text_71">三江源法治</span>
<img class="image_5" referrerpolicy="no-referrer"
src="./img/SketchPng7e8f14fec2a82c205cef6b28e99bd207ca3feca9f8c5c9f95809747023228df4.png" />
</div>
<div class="group_9 flex-col" v-if="rightIconData.selectIndex == 4" style="margin-top: 3.7rem">
<span class="text_71">三江源政府</span>
<img class="image_5" referrerpolicy="no-referrer"
src="./img/SketchPng7e8f14fec2a82c205cef6b28e99bd207ca3feca9f8c5c9f95809747023228df4.png" />
</div>
<div class="group_10 flex-col justify-between">
<div class="image-wrapper_6 flex-col" @click="handleClickRight(1,'微信')">
<img class="image_6" referrerpolicy="no-referrer"
src="./img/SketchPng0dd2efc7ad69345b5747fc716f50e10e10a65d372ee84df2b06ee86dde36a328.png" />
</div>
<div class="image-wrapper_7 flex-col" @click="handleClickRight(2,'微博')">
<img class="image_7" referrerpolicy="no-referrer"
src="./img/SketchPng3fc2aaae6bdf5971e421d5f28f71c48458525d8b59a0f8afa4bd1ef3c3a4b136.png" />
</div>
</div>
</div>
<div class="image-wrapper_8 flex-col" @click="handleClickRight(3,'法治')">
<img class="image_8" referrerpolicy="no-referrer"
src="./img/SketchPng4ca0702d06a449262c636477db73b795cc614639c81324fe697c60886fac063c.png" />
</div>
<div class="image-wrapper_9 flex-col" @click="handleClickRight(4,'政府')">
<img class="image_9" referrerpolicy="no-referrer"
src="./img/SketchPng55728c50d4ea80950d707ee35d5910a6485a16f00a369966c6b856f04796cf6c.png" />
</div>
<div class="image-wrapper_10 flex-col" @click="topFunction()">
<img class="image_10" referrerpolicy="no-referrer"
src="./img/SketchPng7870e18b05604ef2be9c95704483417e2ae0f74f01383d67fe20d4410915f776.png" />
</div>
</div>
</div>
<!-- 底部 -->
<div class="group_13 flex-col"
style="background-image: url(./img/28f78fd23da4452289e4d390f1e0f7ac_mergeImage.png); ">
<div class="section_13 flex-col"></div>
<div class="section_14 flex-row">
<img class="image_16" referrerpolicy="no-referrer"
src="./img/SketchPng2872bb3456a736e1a081e103abf5bf638963142165d17926b8ccf09842f82642.png" />
<img class="image_17" referrerpolicy="no-referrer"
src="./img/SketchPngec1334543181ea26f64861a4dae41bbde20c99e7ea9418d7cee7590f0625b492.png" />
<img class="image_18" referrerpolicy="no-referrer"
src="./img/SketchPnge75ec605d5a13fe2538b9dc8b55a3d602cb21c29eb960f41f31ee823cd92fe0b.png" />
<img class="image_19" referrerpolicy="no-referrer"
src="./img/SketchPng954bbc547400906d515d7860c2bb1977d752dc013b7d03cc4a2b3a7e45c6d96b.png" />
<div class="text-wrapper_38 flex-col justify-between">
<span class="text_82">
网站地图 联系我们 网站声明 便民服务 免责条款 安全须知
</span>
<span class="paragraph_2">
Copyright © 2023 sjy.qinghai.gov.cn All Rights Reserved 版权所有：三江源国家公园管理局
<br />
青ICP备17001282号 青公网安备 63010402000279号 政府网站标识码 6300000059
</span>
</div>
</div>
<img class="image_home_20" referrerpolicy="no-referrer"
src="./img/SketchPnge1225200ffece62754e3040e482a2610c75dae6279ee56d054e21b519c31d71e.png" />
</div>
</div>
</body>
<!-- import Vue before Element -->
<script>
new Vue({
el: "#app",
data: function () {
return {
visible: false,
selectIndex: 1,
selectIndexInfo: 2,
isShow: true,
isShow2: true,
rightIconData: { selectIndex: 1, name: "" },
selectMenu: 2,
selectMenuItem: -1,
fontSize: 0.5,
startYuyin: true,
radio: '1',
radio2: '1',
radio3: '1',
menuList: ['首页', '新闻中心', '走进公园', '政务公开', '互动交流', '公园视讯', '共建三江', '专题栏目'],
selecetMenuIndex: 0,
time: null,
gongkaishenqingIndex: 0,
gongkaishenqingMenu: ['留言选登', '留言查询', '我要留言'],
};
},
created() {
this.date2str()
},
methods: {
// 政府公开内容菜单点击
handleClickGongkai(val) {
if (this.selectMenu != val) {
this.selectMenuItem = -1;
}
this.selectMenu = val;
},
handleClickRight(val, name) {
this.rightIconData.selectIndex = val;
this.rightIconData.name = name;
},
handleClickMenuItem(val, index) {
this.selectMenuItem = index;
},
// 头部鼠标滑动切换菜单
mouseOverEvent(val) {
this.selecetMenuIndex = val;
console.log('val---', val)
},
// 点击按钮，返回顶部
topFunction() {
window.onscroll = function () {
scrollFunction();
};
function scrollFunction() {
console.log(121);
if (
document.body.scrollTop > 20 ||
document.documentElement.scrollTop > 20
) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
},
yuYin(val) {
var msg = new SpeechSynthesisUtterance();
let one = document.querySelector(".textCount")
msg.text = one.textContent
msg.lang = 'zh'; //汉语
msg.volume = 50; // 声音的音量
msg.rate = 0.7; //语速，数值，默认值是1，范围是0.1到10
msg.pitch = 1.5; // 表示说话的音高，数值，范围从0（最小）到2（最大）。默认值为1
if (val == 1) {
speechSynthesis.speak(msg);
speechSynthesis.resume(msg)
this.startYuyin = false
} else {
this.startYuyin = true
speechSynthesis.pause(msg)
}
},
date2str() {
let currentDate = new Date();
let formattedDate = currentDate.getFullYear() + '-' +
('0' + (currentDate.getMonth() + 1)).slice(-2) + '-' +
('0' + currentDate.getDate()).slice(-2);
let day = currentDate.getDay();
let days = ["日", "一", "二", "三", "四", "五", "六"];
let formattedDay = days[day];
this.time = formattedDate + ' 星期' + formattedDay
console.log(formattedDate);
}
},
});
</script>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手