代码拉取完成，页面将自动刷新
<!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 class="group_2 news_box" style="height: auto">
<div class="news_content" style=" background: linear-gradient(180deg, #FFFFFD 0%, #FFE6D2 100%);
border: 1px solid #F1BCB6;">
<!-- <img
class="thumbnail_3"
referrerpolicy="no-referrer"
src="./img/SketchPng056f69b859936af8115b738a75185710f65a36fa0ed44ec2ed9b9aab70faaf73.png"
/> -->
<span class="text-group_6"><img src="./img/position.png" style="width: 23px; height: 26px" alt="" />
当前位置：政务公开</span><span>>领导之窗</span>
</div>
<div class="section_5 flex-row" style="margin: 0 0 0.6rem 0;height: auto;">
<div style="margin-left: 8.25rem;" class="flex-row zwgk_content">
<!-- 左侧菜单栏 -->
<div class="zf_menu_left">
<div class="zfxx_menu">
<div :class="selectMenu == 1 ? 'gongkai-menu-select':'gongkai-menu'"
@mouseenter="handleClickGongkai(1)">
<img src="./img/zwgkicon1.png" alt="">
<span>领导之窗</span>
</div>
<div v-if="selectMenu == 1" style="margin-bottom: 0.6rem;">
</div>
<div :class="selectMenu == 2 ? 'gongkai-menu-select':'gongkai-menu'"
@mouseenter="handleClickGongkai(2)">
<img src="./img/zwgkicon2.png" alt="">
<span>机构设置</span>
</div>
<div v-if="selectMenu == 2" style="margin-bottom: 0.6rem;">
<!-- <div style="margin: 0.3rem 0;"
:class="selectMenuItem == 2 && selectMenu == 2 ? 'gongkai-menu-select-item':'gongkai-menu-item'"
@click="handleClickMenuItem(1)">政策法规</div>
<div style="margin: 0.3rem 0;"
:class="selectMenuItem == 2 && selectMenu == 2 ? 'gongkai-menu-select-item':'gongkai-menu-item'"
@click="handleClickMenuItem(2)">政府采购</div> -->
</div>
<div :class="selectMenu == 3 ? 'gongkai-menu-select':'gongkai-menu'"
@mouseenter="handleClickGongkai(3)">
<img src="./img/zwgkicon3.png" alt="">
<span>公开指南</span>
</div>
<div v-if="selectMenu == 3" style="margin-bottom: 0.6rem;">
<div style="margin: 0.3rem 0;"
:class="selectMenuItem == 3 && selectMenu == 3 ? 'gongkai-menu-select-item':'gongkai-menu-item'"
@click="handleClickMenuItem(1)">政策法规</div>
<div style="margin: 0.3rem 0;"
:class="selectMenuItem == 2 && selectMenu == 3 ? 'gongkai-menu-select-item':'gongkai-menu-item'"
@click="handleClickMenuItem(2)">政府采购</div>
</div>
<div :class="selectMenu == 4 ? 'gongkai-menu-select':'gongkai-menu'"
@mouseenter="handleClickGongkai(4)">
<img src="./img/zwgkicon4.png" alt="">
<span>公开制度</span>
</div>
<div v-if="selectMenu == 4" style="margin-bottom: 0.6rem;">
<div style="margin: 0.3rem 0;"
:class="selectMenuItem == 1 && selectMenu == 4 ? 'gongkai-menu-select-item':'gongkai-menu-item'"
@click="handleClickMenuItem(1)">政策法规</div>
<div style="margin: 0.3rem 0;"
:class="selectMenuItem == 2 && selectMenu == 4 ? 'gongkai-menu-select-item':'gongkai-menu-item'"
@click="handleClickMenuItem(2)">政府采购</div>
</div>
<div :class="selectMenu == 5 ? 'gongkai-menu-select':'gongkai-menu'"
@mouseenter="handleClickGongkai(5)">
<img src="./img/zwgkicon6.png" alt="">
<span>公开内容</span>
</div>
<div v-if="selectMenu == 5" style="margin-bottom: 0.6rem;">
<div :class="selectMenuItem == 1 && selectMenu == 5 ? 'gongkai-menu-select-item':'gongkai-menu-item'"
@click="handleClickMenuItem(1)">政策法规</div>
<div :class="selectMenuItem == 2 && selectMenu == 5 ? 'gongkai-menu-select-item':'gongkai-menu-item'"
@click="handleClickMenuItem(2)">政府采购</div>
</div>
</div>
</div>
<!-- -->
<div style="width: 24.4rem; padding: 0 0rem 1rem 0;background-color: #fff;font-size: 0.426rem;">
<div class="zwgk_jgsz_content_title">
领导之窗
</div>
<div class="flex-row" style="text-align: center;">
<div class="" style="padding: 0 0.5rem;border-right: 1px solid #E0E0E0;margin-top: 0.5rem;">
<a>
<img src="./img/lingdaozhichaung1.png" style="width: 4.32rem;height: 5.947rem;"
alt="">
<div style="color: rgba(13, 84, 173, 1);margin-top: 0.5rem;">王湘国</div>
<div> 三江源国家公园管理局 </div>
<div>党委书记、局长</div>
</a>
</div>
<div class=" flex-warp " style="width: 18rem; padding: 1.5rem 1rem 0 1.8rem; ">
<a style="width: 33%;">
<img src="./img/lingdaozhichaung2.png"style="width: 3.574rem;height: 4.907rem;margin-top:0.5rem;"
alt="">
<div style="color: rgba(13, 84, 173, 1);margin-top: 0.5rem;">田俊量</div>
<div> 三江源国家公园管理局 </div>
<div>党委委员、副局长</div>
</a>
<a style="width: 33%;">
<img src="./img/lingdaozhichaung3.png"style="width: 3.574rem;height: 4.907rem;margin-top:0.5rem;"
alt="">
<div style="color: rgba(13, 84, 173, 1);margin-top: 0.5rem;">孙立军</div>
<div> 三江源国家公园管理局 </div>
<div>党委委员、副局长</div>
</a>
<a style="width: 33%;">
<img src="./img/lingdaozhichaung4.png"style="width: 3.574rem;height: 4.907rem;margin-top:0.5rem;"
alt="">
<div style="color: rgba(13, 84, 173, 1);margin-top: 0.5rem;">李增刚</div>
<div> 三江源国家公园管理局 </div>
<div>党委委员、副局长</div>
</a>
<a style="width: 33%;">
<img src="./img/lingdaozhichaung5.png"style="width: 3.574rem;height: 4.907rem;margin-top:0.5rem;"
alt="">
<div style="color: rgba(13, 84, 173, 1);margin-top: 0.5rem;margin-top: 0.6rem;">晁世海</div>
<div> 三江源国家公园管理局 </div>
<div>党委委员、副局长</div>
</a>
<a style="width: 33%;">
<img src="./img/lingdaozhichaung6.png"style="width: 3.574rem;height: 4.907rem;margin-top:0.5rem;"
alt="">
<div style="color: rgba(13, 84, 173, 1);margin-top: 0.5rem;">李生平</div>
<div> 三江源国家公园管理局 </div>
<div>党委委员、副局长</div>
</a>
<!-- <a>
<img src="./img/lingdaozhichaung7.png"style="width: 3.574rem;height: 4.907rem;margin-top:0.5rem;"
alt="">
<div style="color: rgba(13, 84, 173, 1);margin-top: 0.5rem;">任永禄</div>
<div> 三江源国家公园管理局 </div>
<div>一级巡视员</div>
</a> -->
</div>
</div>
</div>
</div>
</div>
</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_12 flex-row justify-between">
<div class="image-text_8 flex-row justify-between">
<span class="text-group_8">青海省直各厅局</span>
<img class="thumbnail_4" referrerpolicy="no-referrer"
src="./img/SketchPng4a614759072734c158e9272d4962ef4f78f7e1d389e6a5942799e609858cdeda.png" />
</div>
<div class="image-text_9 flex-row justify-between">
<span class="text-group_9" style="
background: url(./img/SketchPngb4f9f1bd5b64d1d560b91717235a0b5281155b0685cda8dd27c111c59e73f6a2.png) -0.24rem -0.24rem
no-repeat;
">中央政府和国家部委网站</span>
<img class="thumbnail_5" referrerpolicy="no-referrer"
src="./img/SketchPng4a614759072734c158e9272d4962ef4f78f7e1d389e6a5942799e609858cdeda.png" />
</div>
<div class="image-text_10 flex-row justify-between">
<span class="text-group_10">其他国家公园</span>
<img class="thumbnail_6" referrerpolicy="no-referrer"
src="./img/SketchPng4a614759072734c158e9272d4962ef4f78f7e1d389e6a5942799e609858cdeda.png" />
</div>
<div class="image-text_11 flex-row justify-between">
<span class="text-group_11">友情链接</span>
<img class="thumbnail_7" referrerpolicy="no-referrer"
src="./img/SketchPng4a614759072734c158e9272d4962ef4f78f7e1d389e6a5942799e609858cdeda.png" />
</div>
</div> -->
<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: 1,
selectMenuItem: -1,
fontSize: 0.5,
startYuyin: true,
radio: '1',
radio2: '1',
radio3: '1',
menuList: ['首页', '新闻中心', '走进公园', '政务公开', '互动交流', '公园视讯', '共建三江', '专题栏目'],
selecetMenuIndex: 0,
time: null
};
},
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 助手