From dbe7eb53558f3f7ac95beeb705518d7156b062cf Mon Sep 17 00:00:00 2001 From: YM <479443481@qq.com> Date: 星期五, 19 四月 2024 06:19:13 +0800 Subject: [PATCH] 世医页面 --- src/pages/Register/Register.vue | 10 src/pages/inherit/list.vue | 1454 +++++++++++++++++++--------------- src/static/image/inherit/icon1.png | 0 src/components/headNav/headNav.vue | 924 +++++++++++---------- src/pages/inherit/index.vue | 10 src/pages/index/index.vue | 19 src/pages/Login/Login.vue | 10 src/pages/changePassword/changePassword.vue | 10 src/static/image/inherit/icon2.png | 0 src/static/image/inherit/icon3.png | 0 10 files changed, 1,336 insertions(+), 1,101 deletions(-) diff --git a/src/components/headNav/headNav.vue b/src/components/headNav/headNav.vue index 8f4da73..65c390f 100644 --- a/src/components/headNav/headNav.vue +++ b/src/components/headNav/headNav.vue @@ -1,479 +1,533 @@ <template> - <view class="headNav"> - <view class="NavTop flex" :style="{backgroundImage: 'url('+ bg + ')'}"> - <view class="santiaogang" style="width: .34rem;height: .34rem;margin-right: 3rem;" - @click="menuNav = !menuNav"><img style="width: 100%;height: 100%;" - src="@/static/涓尰浜虹墿鐭ヨ瘑搴�0201/涓夋潯鏉�.png" alt="" /></view> - <view class="flex" style="letter-spacing: 5rpx;"> - <view class="logo"></view> - <view class="" style="margin-left: .19rem;font-size: .24rem;font-family: cursive;font-weight: 900;"> - {{text}} - </view> - </view> - <view class="NavTopr flex"> - <view class="flex searchCss" :style="{'backgroundColor': isExpanded==true?'#fff':''}" - style="border-radius: .5rem; width: 2.33rem;margin-right: .30rem;justify-content: flex-end;"> - <!-- overflow: hidden; --> - <input :style="{'display': isExpanded == true ? 'block' : 'none'}" type="text" - style="margin-left: .02rem; flex: 1; background-color: #fff; font-size: .13rem;" - @blur="InputBlur" class="search-input" v-model="searchInput" placeholder="璇疯緭鍏ユ悳绱㈠唴瀹�" /> - <view class="search-logo" @click="toggleSearch" - :style="{'backgroundColor':searchBg==true?'#244A7B':'#DA7A2B'}" - style="background-color: #000;border-radius: 50%;margin-top: -4rpx;"></view> - </view> - <el-dropdown trigger="click" @command="handleCommand"> - <!-- <view @click="iconClick(2)" class="s2 ss1 "></view> --> - <img class="cursor" @click="changePassword(1)" src="@/static/image/profile.svg" alt="" /> - <el-dropdown-menu v-if="isCommand" slot="dropdown"> - <el-dropdown-item command="1">淇敼瀵嗙爜</el-dropdown-item> - <el-dropdown-item command="2" >閫�鍑虹櫥褰�</el-dropdown-item> - </el-dropdown-menu> - </el-dropdown> - <img class="cursor" @click="changePassword(2)" src="@/static/image/quote.svg" style="margin-right: 0;" - alt="" /> - </view> - </view> - <view class="mImage" :style="{backgroundImage: 'url('+ bg1 + ')'}"></view> - <el-dialog :visible.sync="menuNav" class="leftListBg" :modal="false" title="瀵硅瘽妗嗘爣棰�"> - <!-- 鑳屾櫙 --> - <img class="leftListBgImage" src="@/static/image/leftListBg.png" alt="" /> - <view class="" style="position: relative;z-index: 999;"> - <view class="flex flex-center LeftLogo"> - <!-- <img src="@/static/image/logo.png" ></img> --> - <view class="img"></view> - </view> - <el-menu :default-active="idIndex" active-text-color="#ffffff" class="el-menu-vertical-demo" - @select="handleSelect"> - <el-menu-item index="0"> - <span slot="title">棣栭〉</span> - </el-menu-item> - <el-menu-item index="1"> - <span slot="title">涓尰浜虹墿鏁版嵁搴�</span> - </el-menu-item> - <el-menu-item index="2"> - <span slot="title">涓栧尰鍖诲鏁版嵁搴�</span> - </el-menu-item> - <el-menu-item index="3"> - <span slot="title">涓尰鍖诲娴佹淳</span> - </el-menu-item> - <el-menu-item index="4"> - <span slot="title">涓尰鍦板煙鍥捐氨</span> - </el-menu-item> - <el-menu-item index="5"> - <span slot="title">涓尰鍖讳簨鍒跺害</span> - </el-menu-item> - </el-menu> - </view> - </el-dialog> - <!-- <view class="" style="position: fixed;right: 0;top: 0;" @click="dialogVisible = !dialogVisible">姘存按姘存按</view> --> - <!-- <el-card v-if="menuNav" + <view class="headNav"> + <view class="NavTop flex" :style="{ backgroundImage: 'url(' + bg + ')' }"> + <view + class="santiaogang" + style="width: 0.34rem; height: 0.34rem; margin-right: 3rem;cursor: pointer;" + @click="menuNav = !menuNav" + ><img + style="width: 100%; height: 100%" + src="@/static/涓尰浜虹墿鐭ヨ瘑搴�0201/涓夋潯鏉�.png" + alt="" + /></view> + <view class="flex" style="letter-spacing: 5rpx"> + <view class="logo"></view> + <view + class="" + style=" + margin-left: 0.19rem; + font-size: 0.24rem; + font-family: cursive; + font-weight: 900; + " + > + {{ text }} + </view> + </view> + <view class="NavTopr flex"> + <view + class="flex searchCss" + :style="{ backgroundColor: isExpanded == true ? '#fff' : '' }" + style=" + border-radius: 0.5rem; + width: 2.33rem; + margin-right: 0.3rem; + justify-content: flex-end; + " + > + <!-- overflow: hidden; --> + <input + :style="{ display: isExpanded == true ? 'block' : 'none' }" + type="text" + style=" + margin-left: 0.02rem; + flex: 1; + background-color: #fff; + font-size: 0.13rem; + " + @blur="InputBlur" + class="search-input" + v-model="searchInput" + placeholder="璇疯緭鍏ユ悳绱㈠唴瀹�" + /> + <view + class="search-logo" + @click="toggleSearch" + :style="{ + backgroundColor: searchBg == true ? '#244A7B' : '#DA7A2B' + }" + style=" + background-color: #000; + border-radius: 50%; + margin-top: -4rpx; + " + ></view> + </view> + <el-dropdown trigger="click" @command="handleCommand"> + <!-- <view @click="iconClick(2)" class="s2 ss1 "></view> --> + <img + class="cursor" + @click="changePassword(1)" + src="@/static/image/profile.svg" + alt="" + /> + <el-dropdown-menu v-if="isCommand" slot="dropdown"> + <el-dropdown-item command="1">淇敼瀵嗙爜</el-dropdown-item> + <el-dropdown-item command="2">閫�鍑虹櫥褰�</el-dropdown-item> + </el-dropdown-menu> + </el-dropdown> + <img + class="cursor" + @click="changePassword(2)" + src="@/static/image/quote.svg" + style="margin-right: 0" + alt="" + /> + </view> + </view> + <view + class="mImage" + :style="{ backgroundImage: 'url(' + bg1 + ')' }" + ></view> + <el-dialog + :visible.sync="menuNav" + class="leftListBg" + :modal="false" + title="瀵硅瘽妗嗘爣棰�" + > + <!-- 鑳屾櫙 --> + <img class="leftListBgImage" src="@/static/image/leftListBg.png" alt="" /> + <view class="" style="position: relative; z-index: 999"> + <view class="flex flex-center LeftLogo"> + <!-- <img src="@/static/image/logo.png" ></img> --> + <view class="img"></view> + </view> + <el-menu + :default-active="idIndex" + active-text-color="#ffffff" + class="el-menu-vertical-demo" + @select="handleSelect" + > + <el-menu-item index="0"> + <span slot="title">棣栭〉</span> + </el-menu-item> + <el-menu-item index="1"> + <span slot="title">涓尰浜虹墿鏁版嵁搴�</span> + </el-menu-item> + <el-menu-item index="2"> + <span slot="title">涓栧尰鍖诲鏁版嵁搴�</span> + </el-menu-item> + <el-menu-item index="3"> + <span slot="title">涓尰鍖诲娴佹淳</span> + </el-menu-item> + <el-menu-item index="4"> + <span slot="title">涓尰鍦板煙鍥捐氨</span> + </el-menu-item> + <el-menu-item index="5"> + <span slot="title">涓尰鍖讳簨鍒跺害</span> + </el-menu-item> + </el-menu> + </view> + </el-dialog> + <!-- <view class="" style="position: fixed;right: 0;top: 0;" @click="dialogVisible = !dialogVisible">姘存按姘存按</view> --> + <!-- <el-card v-if="menuNav" style="position: fixed;left: 0;top: 0; z-index: 999999999; width: 240px;height: 100vh;"> </el-card> --> - </view> + </view> </template> <script> - import {getlogout} from '@/api/index.js' - export default { - name: "headNav", - props: { - text: { - type: String, - default () { - return '鏍囬' - } - }, - searchBg: { - type: Boolean, - default () { - return true - } - }, - bg: { - type: String, - default () { - return '/static/image/topBg.png' - } - }, - bg1: { - type: String, - default () { - return '/static/image/line.png' - } - }, - idIndex: { - type: String, - default () { - return '1' - } - } - }, - data() { - return { - isExpanded: false, // 鎺у埗鎼滅储妗嗘槸鍚﹀睍寮� - searchInput: '', // 鎼滅储妗嗚緭鍏ョ殑鍐呭 - menuNav: false, - dialogVisible: false, - isCommand: true - }; - }, - methods: { - // 淇敼瀵嗙爜 - changePassword(index) { - if (index == 1) { - // console.log('sdfdsf'); - // 妫�鏌� localStorage 涓槸鍚﹀瓨鍦� token - if (localStorage.getItem('access_token')) { - // token 瀛樺湪 - console.log('access_token'); - this.isCommand = true - } else { - // token 涓嶅瓨鍦� - // console.log('Token does not exist.'); - this.isCommand = false - // uni.navigateTo({ - // url: '/pages/Login/Login' - // }) - console.log('涓嶅瓨鍦�'); - uni.showModal({ - // 璇㈤棶鐢ㄦ埛鏄惁閫�鍑虹櫥褰� - title: '璇烽噸鏂扮櫥褰�', - content: '鎮ㄧ‘瀹氳閲嶆柊鐧诲綍鍚�?', - success: async (res) => { - console.log(res, 'reresresrer'); - if (res.confirm) { - setTimeout(() => { - uni.reLaunch({ - url: '/pages/Login/Login', - }); - }, 1500); - - } else if (res.cancel) { - // console.log('鐢ㄦ埛鐐瑰嚮鍙栨秷'); - uni.showToast({ - title: '鐢ㄦ埛鐐瑰嚮鍙栨秷', - icon: 'none', - }); - } - }, - }); - } - // uni.navigateTo({ - // url: '/pages/changePassword/changePassword' - // }) - } else if (index == 2) { - console.log('甯姪'); - } - }, - // 淇敼鑾峰彇閫�鍑烘寜閽� - handleCommand(int) { - if (int == 1) { - console.log('淇敼瀵嗙爜'); - uni.navigateTo({ - url: '/pages/changePassword/changePassword' - }) - } else if (int == 2) { - // console.log('閫�鍑虹櫥褰�'); - uni.showModal({ - // 璇㈤棶鐢ㄦ埛鏄惁閫�鍑虹櫥褰� - title: '閫�鍑虹櫥褰�', - content: '鎮ㄧ‘瀹氳閫�鍑虹櫥褰曞悧?', - success: async (res) => { - console.log(res, 'reresresrer'); +import { getlogout } from "@/api/index.js"; +export default { + name: "headNav", + props: { + text: { + type: String, + default() { + return "鏍囬"; + } + }, + searchBg: { + type: Boolean, + default() { + return true; + } + }, + bg: { + type: String, + default() { + return "/static/image/topBg.png"; + } + }, + bg1: { + type: String, + default() { + return "/static/image/line.png"; + } + }, + idIndex: { + type: String, + default() { + return "1"; + } + } + }, + data() { + return { + isExpanded: false, // 鎺у埗鎼滅储妗嗘槸鍚﹀睍寮� + searchInput: "", // 鎼滅储妗嗚緭鍏ョ殑鍐呭 + menuNav: false, + dialogVisible: false, + isCommand: true + }; + }, + methods: { + // 淇敼瀵嗙爜 + changePassword(index) { + if (index == 1) { + // console.log('sdfdsf'); + // 妫�鏌� localStorage 涓槸鍚﹀瓨鍦� token + if (localStorage.getItem("access_token")) { + // token 瀛樺湪 + console.log("access_token"); + this.isCommand = true; + } else { + // token 涓嶅瓨鍦� + // console.log('Token does not exist.'); + this.isCommand = false; + // uni.navigateTo({ + // url: '/pages/Login/Login' + // }) + console.log("涓嶅瓨鍦�"); + uni.showModal({ + // 璇㈤棶鐢ㄦ埛鏄惁閫�鍑虹櫥褰� + title: "璇烽噸鏂扮櫥褰�", + content: "鎮ㄧ‘瀹氳閲嶆柊鐧诲綍鍚�?", + success: async (res) => { + console.log(res, "reresresrer"); + if (res.confirm) { + setTimeout(() => { + uni.reLaunch({ + url: "/pages/Login/Login" + }); + }, 1500); + } else if (res.cancel) { + // console.log('鐢ㄦ埛鐐瑰嚮鍙栨秷'); + uni.showToast({ + title: "鐢ㄦ埛鐐瑰嚮鍙栨秷", + icon: "none" + }); + } + } + }); + } + // uni.navigateTo({ + // url: '/pages/changePassword/changePassword' + // }) + } else if (index == 2) { + console.log("甯姪"); + } + }, + // 淇敼鑾峰彇閫�鍑烘寜閽� + handleCommand(int) { + if (int == 1) { + console.log("淇敼瀵嗙爜"); + uni.navigateTo({ + url: "/pages/changePassword/changePassword" + }); + } else if (int == 2) { + // console.log('閫�鍑虹櫥褰�'); + uni.showModal({ + // 璇㈤棶鐢ㄦ埛鏄惁閫�鍑虹櫥褰� + title: "閫�鍑虹櫥褰�", + content: "鎮ㄧ‘瀹氳閫�鍑虹櫥褰曞悧?", + success: async (res) => { + console.log(res, "reresresrer"); - if (res.confirm) { - // 閫�鍑烘帴鍙� - await getlogout().then(res => { - //纭畾閫�鍑烘嬁鍒皌oken骞舵竻闄oken - let TOKEN = uni.getStorageSync('access_token'); - uni.clearStorageSync(); - //閫�鍑烘垚鍔燂紒骞惰烦杞埌鍏朵粬椤甸潰 - uni.showToast({ - title: '閫�鍑烘垚鍔�', - icon: 'none', - }); - }) - setTimeout(() => { - uni.reLaunch({ - url: '/pages/Login/Login', - }); - }, 1500); - } else if (res.cancel) { - // console.log('鐢ㄦ埛鐐瑰嚮鍙栨秷'); - uni.showToast({ - title: '鐢ㄦ埛鐐瑰嚮鍙栨秷', - icon: 'none', - }); - } - }, - }); - } - }, - aaa() { - console.log('ss'); - }, - handleSelect(index) { - console.log(index); - if (index === '0') { - uni.navigateTo({ - url: '/pages/index/index?id=' + 0 - }); - } else if (index === '1') { - uni.navigateTo({ - url:'/pages/characterRelation/characterRelation?id=' + 1 - }); - } else if (index === '2') { - uni.navigateTo({ - url: '/pages/inherit/index?id=' + 2 - }); - } else if (index === '3') { - uni.navigateTo({ - url: '/pages/dataDisplay/dataDisplay?id=' + 3 - }); - } else if (index === '4') { - uni.navigateTo({ - url: '/pages/territory/territory?id=' + 4 - }); - } else if (index === '5') { - uni.navigateTo({ - url: '/pages/TcmSystem/TcmSystem?id=' + 5 - }); - } - }, - // 鎼滅储妗嗙殑鐨勭Щ鍑� - InputBlur() { + if (res.confirm) { + // 閫�鍑烘帴鍙� + await getlogout().then((res) => { + //纭畾閫�鍑烘嬁鍒皌oken骞舵竻闄oken + let TOKEN = uni.getStorageSync("access_token"); + uni.clearStorageSync(); + //閫�鍑烘垚鍔燂紒骞惰烦杞埌鍏朵粬椤甸潰 + uni.showToast({ + title: "閫�鍑烘垚鍔�", + icon: "none" + }); + }); + setTimeout(() => { + uni.reLaunch({ + url: "/pages/Login/Login" + }); + }, 1500); + } else if (res.cancel) { + // console.log('鐢ㄦ埛鐐瑰嚮鍙栨秷'); + uni.showToast({ + title: "鐢ㄦ埛鐐瑰嚮鍙栨秷", + icon: "none" + }); + } + } + }); + } + }, + aaa() { + console.log("ss"); + }, + handleSelect(index) { + console.log(index); + if (index === "0") { + uni.navigateTo({ + url: "/pages/index/index?id=" + 0 + }); + } else if (index === "1") { + uni.navigateTo({ + url: "/pages/characterRelation/characterRelation?id=" + 1 + }); + } else if (index === "2") { + uni.navigateTo({ + url: "/pages/inherit/index?id=" + 2 + }); + } else if (index === "3") { + uni.navigateTo({ + url: "/pages/dataDisplay/dataDisplay?id=" + 3 + }); + } else if (index === "4") { + uni.navigateTo({ + url: "/pages/territory/territory?id=" + 4 + }); + } else if (index === "5") { + uni.navigateTo({ + url: "/pages/TcmSystem/TcmSystem?id=" + 5 + }); + } + }, + // 鎼滅储妗嗙殑鐨勭Щ鍑� + InputBlur() { + // this.isExpanded = !this.isExpanded; + // this.searchInput = ''; + }, + // 鍒囨崲鎼滅储妗嗙殑灞曞紑鍜屾敹璧风姸鎬� + toggleSearch() { + // console.log('鎾掓棪鑼冨痉钀ㄥ彂鐢熺殑',this.searchInput); + this.isExpanded = !this.isExpanded; + this.$nextTick(() => { + if (this.searchInput.trim() !== "") { + console.log("鎼滅储", this.searchInput); + } else { + console.log("涓嶆悳绱�"); + } - // this.isExpanded = !this.isExpanded; - // this.searchInput = ''; - }, - // 鍒囨崲鎼滅储妗嗙殑灞曞紑鍜屾敹璧风姸鎬� - toggleSearch() { - // console.log('鎾掓棪鑼冨痉钀ㄥ彂鐢熺殑',this.searchInput); - this.isExpanded = !this.isExpanded; - this.$nextTick(() => { - if (this.searchInput.trim() !== '') { - console.log('鎼滅储', this.searchInput); - } else { - console.log('涓嶆悳绱�'); - } - - this.searchInput = ''; - console.log(this.isExpanded); - }) - } - } - } + this.searchInput = ""; + console.log(this.isExpanded); + }); + } + } +}; </script> <style scoped> - .LeftLogo { - width: 100%; - margin: .52rem 0 .5rem; +.LeftLogo { + width: 100%; + margin: 0.52rem 0 0.5rem; - .img { - width: .52rem; - height: .52rem; - background-image: url(@/static/image/logo3.png); - background-repeat: no-repeat; - background-size: 100% 100%; - /* image-rendering: pixelated; */ - } - } + .img { + width: 0.52rem; + height: 0.52rem; + background-image: url(@/static/image/logo3.png); + background-repeat: no-repeat; + background-size: 100% 100%; + /* image-rendering: pixelated; */ + } +} - @media screen and (min-width:2560px)and (max-width:3840px) { +@media screen and (min-width: 2560px) and (max-width: 3840px) { + ::v-deep .el-menu .is-active { + background-color: #244a7b !important; + border-radius: 0.5rem; + } - ::v-deep .el-menu .is-active { - background-color: #244A7B !important; - border-radius: .5rem; + .LeftLogo .img { + background-image: url(@/static/image/logo4.png); + } +} - } +@media screen and (min-width: 1366px) and (max-width: 1920px) { + ::v-deep .el-menu .is-active { + background-color: #244a7b !important; + border-radius: 0.5rem; + } - .LeftLogo .img { - background-image: url(@/static/image/logo4.png); - } - } + .LeftLogo .img { + background-image: url(@/static/image/logo.png); + } +} - @media screen and (min-width:1366px) and (max-width:1920px) { +::v-deep .uni-input-placeholder { + padding-left: 0.05rem; +} - ::v-deep .el-menu .is-active { - background-color: #244A7B !important; - border-radius: .5rem; +.headNav { + /* 绮樻�у畾浣� */ + position: sticky; + top: 0; + z-index: 9; +} - } +.NavTop { + /* background: url(@/static/image/topBg.png); */ - .LeftLogo .img { - background-image: url(@/static/image/logo.png); - } - } + background-size: 100% 100%; + padding: 0.16rem 0.24rem; + color: #fff !important; - ::v-deep .uni-input-placeholder { - padding-left: .05rem; - } + img { + width: 0.1rem; + height: 0.1rem; + vertical-align: middle; + } - .headNav { - /* 绮樻�у畾浣� */ - position: sticky; - top: 0; - z-index: 9; - } + .logo { + width: 0.32rem; + height: 0.32rem; + background: url(@/static/image/logo.png) 0 0 no-repeat; + background-size: 100% 100%; + } - .NavTop { - /* background: url(@/static/image/topBg.png); */ + .NavTopr { + vertical-align: top; - background-size: 100% 100%; - padding: .16rem .24rem; - color: #fff !important; + img { + width: 0.34rem; + height: 0.34rem; + margin-right: 0.3rem; + vertical-align: middle; + } + } +} - img { - width: .1rem; - height: .1rem; - vertical-align: middle; - } +.mImage { + width: 100%; + height: 0.2rem; + /* background-image: url(@/static/image/line.png); */ + background-size: cover; + /* 鑳屾櫙鍥剧墖瑕嗙洊鏁翠釜鍏冪礌 */ + background-position: center; + background-color: #fff; +} - .logo { - width: .32rem; - height: .32rem; - background: url(@/static/image/logo.png) 0 0 no-repeat; - background-size: 100% 100%; - } +.search-container { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + margin-right: 20rpx; - .NavTopr { - vertical-align: top; + img { + margin: 0 !important; + margin-bottom: 4rpx !important; + } +} - img { - width: .34rem; - height: .34rem; - margin-right: .30rem; - vertical-align: middle; - } - } - } +.search-bar { + width: 160rpx; + /* 鍒濆瀹藉害 */ + transition: width 0.3s ease; + /* 杩囨浮鍔ㄧ敾 */ + display: flex; + align-items: center; + position: relative; + border-radius: 5px; + overflow: hidden; + border-radius: 30rpx; + background-color: #fff; +} - .mImage { - width: 100%; - height: .2rem; - /* background-image: url(@/static/image/line.png); */ - background-size: cover; - /* 鑳屾櫙鍥剧墖瑕嗙洊鏁翠釜鍏冪礌 */ - background-position: center; - background-color: #fff; - } +.search-bar.expanded { + width: 100%; + /* 灞曞紑鍚庣殑瀹藉害 */ +} +.search-input { + flex: 1; + /* 鍗犳嵁鍓╀綑绌洪棿 */ + padding-left: 10rpx; + box-sizing: border-box; + /* border: 1rpx solid #fff; */ + outline: none; + color: #000; + height: auto; + min-height: auto; +} +.search-logo { + width: 0.34rem; + /* logo鍥炬爣鐨勫搴� */ + height: 0.34rem; + /* logo鍥炬爣鐨勯珮搴� */ + margin-left: 10rpx; + /* 涓庤緭鍏ユ涔嬮棿鐨勯棿璺� */ + cursor: pointer; + background-image: url(@/static/image/search.svg); + background-size: 100% 100%; +} +.leftListBg { + border-radius: 0; + .leftListBgImage { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + transform: scale(1.29); + } +} - .search-container { - width: 100%; - display: flex; - align-items: center; - justify-content: center; - margin-right: 20rpx; +.el-menu-vertical-demo { + border-right: 0 !important; + background-color: transparent; +} - img { - margin: 0 !important; - margin-bottom: 4rpx !important; - } - } +::v-deep .el-menu .is-active { + background-color: #244a7b !important; + border-radius: 0.5rem; - .search-bar { - width: 160rpx; - /* 鍒濆瀹藉害 */ - transition: width 0.3s ease; - /* 杩囨浮鍔ㄧ敾 */ - display: flex; - align-items: center; - position: relative; - border-radius: 5px; - overflow: hidden; - border-radius: 30rpx; - background-color: #fff; - } + /* padding: 0 .14rem !important; */ +} - .search-bar.expanded { - width: 100%; - /* 灞曞紑鍚庣殑瀹藉害 */ - } - - .search-input { - flex: 1; - /* 鍗犳嵁鍓╀綑绌洪棿 */ - padding-left: 10rpx; - box-sizing: border-box; - /* border: 1rpx solid #fff; */ - outline: none; - color: #000; - height: auto; - min-height: auto; - } - - .search-logo { - width: .34rem; - /* logo鍥炬爣鐨勫搴� */ - height: .34rem; - /* logo鍥炬爣鐨勯珮搴� */ - margin-left: 10rpx; - /* 涓庤緭鍏ユ涔嬮棿鐨勯棿璺� */ - cursor: pointer; - background-image: url(@/static/image/search.svg); - background-size: 100% 100%; - } - - .leftListBg { - border-radius: 0; - - .leftListBgImage { - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; - transform: scale(1.29); - } - } - - .el-menu-vertical-demo { - border-right: 0 !important; - background-color: transparent; - } - - ::v-deep .el-menu .is-active { - background-color: #244A7B !important; - border-radius: .5rem; - - /* padding: 0 .14rem !important; */ - } - - .el-menu-item { - height: .34rem; - line-height: .3rem; - font-size: .16rem; - font-weight: 500; - margin: .13rem .14rem !important; - /* display: flex; +.el-menu-item { + height: 0.34rem; + line-height: 0.3rem; + font-size: 0.16rem; + font-weight: 500; + margin: 0.13rem 0.14rem !important; + /* display: flex; justify-content: center; align-items: center; */ - text-align: left; - padding-left: .4rem !important; - } + text-align: left; + padding-left: 0.4rem !important; +} - ::v-deep .el-dialog__body { - padding-top: 0 !important; - } +::v-deep .el-dialog__body { + padding-top: 0 !important; +} - ::v-deep .el-dialog { - margin-top: 0 !important; - position: fixed; - top: 0; - left: 0; - height: 100vh; - width: 2.51rem; - } +::v-deep .el-dialog { + margin-top: 0 !important; + position: fixed; + top: 0; + left: 0; + height: 100vh; + width: 2.51rem; +} - ::v-deep .el-dialog__header { - display: none; - } +::v-deep .el-dialog__header { + display: none; +} - /* ::v-deep .el-menu-vertical-demo */ -</style> \ No newline at end of file +/* ::v-deep .el-menu-vertical-demo */ +</style> diff --git a/src/pages/Login/Login.vue b/src/pages/Login/Login.vue index 0975d76..51a8490 100644 --- a/src/pages/Login/Login.vue +++ b/src/pages/Login/Login.vue @@ -184,19 +184,19 @@ }, // 涔︾睄鏁版嵁 listData: [{ - name: '鍘嗕唬鍖诲浼犺搴�', + name: '涓尰浜虹墿鏁版嵁搴�', id: 1, }, { - name: '涓栧尰鍖诲搴�', + name: '涓栧尰鍖诲鏁版嵁搴�', id: 2, }, { - name: '鍖诲瀛︽湳娴佹淳', + name: '涓尰瀛︽湳娴佹淳', id: 3, }, { - name: '涓浗鍦板煙鍖昏氨', + name: '涓尰鍦板煙鍖昏氨', id: 4, }, { - name: '涓浗鍖讳簨鍒跺害', + name: '涓尰鍖讳簨鍒跺害', id: 5, }, diff --git a/src/pages/Register/Register.vue b/src/pages/Register/Register.vue index 32492c2..91d5e5d 100644 --- a/src/pages/Register/Register.vue +++ b/src/pages/Register/Register.vue @@ -198,19 +198,19 @@ }, // 涔︾睄鏁版嵁 listData: [{ - name: '鍘嗕唬鍖诲浼犺搴�', + name: '涓尰浜虹墿鏁版嵁搴�', id: 1, }, { - name: '涓栧尰鍖诲搴�', + name: '涓栧尰鍖诲鏁版嵁搴�', id: 2, }, { - name: '鍖诲瀛︽湳娴佹淳', + name: '涓尰瀛︽湳娴佹淳', id: 3, }, { - name: '涓浗鍦板煙鍖昏氨', + name: '涓尰鍦板煙鍖昏氨', id: 4, }, { - name: '涓浗鍖讳簨鍒跺害', + name: '涓尰鍖讳簨鍒跺害', id: 5, }, diff --git a/src/pages/changePassword/changePassword.vue b/src/pages/changePassword/changePassword.vue index 1225c57..99499cd 100644 --- a/src/pages/changePassword/changePassword.vue +++ b/src/pages/changePassword/changePassword.vue @@ -174,19 +174,19 @@ }, // 涔︾睄鏁版嵁 listData: [{ - name: '鍘嗕唬鍖诲浼犺搴�', + name: '涓尰浜虹墿鏁版嵁搴�', id: 1, }, { - name: '涓栧尰鍖诲搴�', + name: '涓栧尰鍖诲鏁版嵁搴�', id: 2, }, { - name: '鍖诲瀛︽湳娴佹淳', + name: '涓尰瀛︽湳娴佹淳', id: 3, }, { - name: '涓浗鍦板煙鍖昏氨', + name: '涓尰鍦板煙鍖昏氨', id: 4, }, { - name: '涓浗鍖讳簨鍒跺害', + name: '涓尰鍖讳簨鍒跺害', id: 5, }, diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue index 2c0dfdb..86f3869 100644 --- a/src/pages/index/index.vue +++ b/src/pages/index/index.vue @@ -115,19 +115,19 @@ }, // 涔︾睄鏁版嵁 listData: [{ - name: '鍘嗕唬鍖诲浼犺搴�', + name: '涓尰浜虹墿鏁版嵁搴�', id: 1, }, { - name: '涓栧尰鍖诲搴�', + name: '涓栧尰鍖诲鏁版嵁搴�', id: 2, }, { - name: '鍖诲瀛︽湳娴佹淳', + name: '涓尰瀛︽湳娴佹淳', id: 3, }, { - name: '涓浗鍦板煙鍖昏氨', + name: '涓尰鍦板煙鍖昏氨', id: 4, }, { - name: '涓浗鍖讳簨鍒跺害', + name: '涓尰鍖讳簨鍒跺害', id: 5, }, @@ -187,12 +187,12 @@ }) } else if (item.id == 2) { console.log(item.name); - // uni.navigateTo({ - // url: '/pages/inherit/index?id=' + item.id - // }) uni.navigateTo({ - url: '/pages/shiyiHome/shiyiHome' + url: '/pages/inherit/index?id=' + item.id }) + // uni.navigateTo({ + // url: '/pages/shiyiHome/shiyiHome' + // }) } else if (item.id == 3) { uni.navigateTo({ url: '/pages/dataDisplay/dataDisplay?id=' + item.id @@ -694,6 +694,7 @@ background: #EBF4FF; font-weight: 600; margin: 0 .21rem; + cursor: pointer; } } diff --git a/src/pages/inherit/index.vue b/src/pages/inherit/index.vue index 9dc0569..84f4708 100644 --- a/src/pages/inherit/index.vue +++ b/src/pages/inherit/index.vue @@ -294,13 +294,15 @@ }; //杩涜娓叉煋 myChart.setOption(option); + myChart.on("click", (params) => { + uni.navigateTo({ + url: "/pages/inherit/list" + }); + }); }, // 杩斿洖鎸夐挳 goBack() { - // uuni.redirectTo(); - uni.redirectTo({ - url: "/pages/index/index", - }); + this.$router.go(-1); }, }, }; diff --git a/src/pages/inherit/list.vue b/src/pages/inherit/list.vue index b91593e..abcbfb5 100644 --- a/src/pages/inherit/list.vue +++ b/src/pages/inherit/list.vue @@ -1,647 +1,825 @@ <template> - <view class=""> - <headNav :idIndex="idIndex" :searchBg="false" text="涓尰涓栧尰浼犳壙鏁版嵁搴�" bg="/static/image/topBg1.png" - bg1="/static/image/line1.png" /> + <view class=""> + <headNav + :idIndex="idIndex" + :searchBg="false" + text="涓尰涓栧尰浼犳壙鏁版嵁搴�" + bg="/static/image/topBg1.png" + bg1="/static/image/line1.png" + /> - <view class="flex" style="padding: .24rem 1.21rem ;background-color: #f0f0f0;"> - <view class="flex"> - <el-button class="MiddeBack flex flex-center" @click="goBack">杩斿洖</el-button> - <h3 style="margin-left: .22rem;font-size: .28erm;font-weight: 500;">閭电櫥鐎�</h3> - </view> - <ul class="flex Lists"> - <li style="background-color: #DA7A2B;color: #fff;">涓栧尰浼犳壙</li> - <!-- /pages/AcademicHistory/AcademicHistory --> - <li @click="ListClick" style="background-color: #fff;color: #DA7A2B;" >涓栧尰鏂囧寲</li> - </ul> - <view class="" style="width: 1rem;"></view> - </view> - <!-- echarts鍥� --> - <div class="barChart" ref="barChart"></div> - </view> + <view + class="flex" + style="padding: 0.24rem 1.21rem; background-color: #f0f0f0" + > + <view class="flex"> + <el-button class="MiddeBack flex flex-center" @click="goBack" + >杩斿洖</el-button + > + <h3 style="margin-left: 0.22rem; font-size: 0.28erm; font-weight: 500"> + 閭电櫥鐎� + </h3> + </view> + <ul class="flex tabBox"> + <li + :class="['tabItem', showType == 1 ? 'active' : ''].join(' ')" + @click="changeType(1)" + > + 涓栧尰浼犳壙 + </li> + <li + :class="['tabItem', showType == 2 ? 'active' : ''].join(' ')" + @click="changeType(2)" + > + 涓栧尰鏂囧寲 + </li> + </ul> + <view class="" style="width: 1rem"></view> + </view> + <view v-if="showType == 1" class="legendBox"> + <view class="socialMappingBox" @click="showSocialMapping"> + <view + class="icon" + :style="{ background: socialMapping ? '#244a7b' : '#9e9e9e' }" + ></view> + <view>绀句細鍏崇郴锛歿{ socialMapping ? "寮�" : "鍏�" }}</view> + </view> + <view class="legend"> + <view class="icon" style="background: #da7a2b"></view> + <view>涓栧尰浼犳壙</view> + </view> + <view class="legend"> + <view class="icon" style="background: #244a7b"></view> + <view>绀句細鍏崇郴</view> + </view> + </view> + <!-- echarts鍥� --> + <div v-if="showType == 1" class="barChart" id="barChart"></div> + <view v-if="showType == 2" class="cultureBox"> + <view class="cultureItem"> + <view class="imgBox"> + <img src="@/static/image/inherit/icon1.png" alt="" /> + </view> + <p> + 钑欏睍涓佷笐鍚岄噷鏃ュ博棰濆簭鍏堣�冩湀姹犵縼钁椼�婂洓褰吀鏄庛�嬪叓鍗凤紝鐨嗙簿鎸囧ゥ瀹わ紝鑼傜妧鏈兘鐤�狅紝鐝嶅洜鎾补鎯宠彍锛屽兊鎾版鍞愶紝浠ヤ究鏅虹潧锛屾湇鎸囧崡銆備笘涔嬮浄鐥呴洦瀹讹紝鍜镐互鏈嶇剦棣栧姟锛屼笉鐭ユ淳涔冨洓鑳戒箣鏈紝璋撲箣宸ц�呴洦銆備笂澹鑸嶅叾鍏紝闈炲洓涓嶅彲銆� + </p> + <h4>鈥斺�斻�婂鍏湇鑰冦�婸 3</h4> + </view> + <view class="cultureItem"> + <view class="imgBox"> + <img src="@/static/image/inherit/icon2.png" alt="" /> + </view> + <p>鐎曟箹涓栧剴锛屽吋浠ラ啱槌达紝涓�闁�鐖跺瓙鍏勫紵瀵屾湁钁楄堪锛屾鐗硅涓�鏂戣�炽��</p> + <h4>鈥斺�斻�婂鍏湇鑰冦�婸 3</h4> + </view> + <view class="cultureItem"> + <view class="imgBox"> + <img src="@/static/image/inherit/icon3.png" alt="" /> + </view> + <p> + 鐥呭潑鍒荤�曟箹銆婃湰鑽夈�嬩箣鍥犱粛瑷涜锛岀埌閲嶇埐閸ユ澘銆傜稉濮嬫柤鐧告湭鍏湀锛岃縿涔欓厜浜旀湀锛岄柋浜屾锛岀硿宸ユ暩钀紝涔冨厠钁充簨銆傚叾鏍$悊瑷涜锛岀洠鐫e墳鍔傦紝鍛藉厭瀛愬腑鐝嶃�佸+鐟溿�佸+鐝╁垎浠讳箣锛涘晢姒锋柟鍔戯紝鍗�鍒ュ搧褰欙紝閱+鐜嬪悰閺″爞涔嬪姏鐖插锛涘弮浠ラ嵕鍚涘彈鐧斤紱鑰岀稉绱�鍏朵簨锛屽绲備笉鎳堣�咃紝鍓囪寖鍚涢潨瀛樹篃銆傛澶栧鐢板悰鎾扮暟銆佹浌鍚涙櫞宄�佺唺鍚涗徊灞便�佺縼鍚涢惖姊呫�侀花鍚涘辜闆层�佸嫉鍚涜搏涔嬨�佺▼鍚涢仈涓夈�侀櫝鍚涙尟閬犮�佽ū鍚涘姛鐢�佹湵鍚涜椈鑷c�佹垨鍙冩牎璁愶紝鎴栧徃缍滄牳锛屾垨鑱峰湒绻紝璎瑰倷鏇镐箣 + </p> + <h4>鈥斺�斻�婂鍏湇鑰冦�婸 3</h4> + </view> + </view> + </view> </template> <script> - import * as echarts from "echarts"; - export default { - data() { - return { - // 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ - idIndex: 0, - activeIndex: 1 - } - }, - onLoad(options) { - this.idIndex = options.id - console.log('optionsoptionsoptions', options.id); - }, - mounted() { - // 鍒濆鍖� echarts - this.initBarChart(); - }, - methods: { - initBarChart() { - // WMBg - //閫氳繃 $ref 杩涜鎸傝浇 - let myChart = echarts.init(this.$refs.barChart); +import * as echarts from "echarts"; +export default { + data() { + return { + // 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ + idIndex: 0, + activeIndex: 1, + dataList: [ + { + name: "钖涢洩", + x: 300, + y: 300, + itemStyle: { + color: "#F8E2D7", + borderColor: "#F3AA78", + borderWidth: "3" + } + }, + { + name: "閭电櫥鐎�", + x: 400, + y: 300, + itemStyle: { + color: "#F8E2D7", + borderColor: "#F3AA78", + borderWidth: "3" + } + }, + { + name: "閭甸瞾鐬�", + x: 500, + y: 300, + itemStyle: { + color: "#F8E2D7", + borderColor: "#F3AA78", + borderWidth: "3" + } + }, + { + name: "閭垫槬娉�", + x: 600, + y: 300, + itemStyle: { + color: "#F8E2D7", + borderColor: "#F3AA78", + borderWidth: "3" + } + }, + { + name: "寰愰敠", + x: 650, + y: 400, + itemStyle: { + color: "#DCE7EB", + borderColor: "#5F81A4", + borderWidth: "3" + } + }, + { + name: "閭典笝鎵�", + x: 700, + y: 300, + itemStyle: { + color: "#F8E2D7", + borderColor: "#F3AA78", + borderWidth: "3" + } + }, + { + name: "鍐鑺�", + x: 720, + y: 400, + itemStyle: { + color: "#DCE7EB", + borderColor: "#5F81A4", + borderWidth: "3" + } + }, + { + name: "鏉庨缚绔�", + x: 740, + y: 500, + itemStyle: { + color: "#E1E1E1", + borderColor: "#888888", + borderWidth: "3" + } + }, + { + name: "閭垫櫙灏�", + x: 800, + y: 200, + itemStyle: { + color: "#F8E2D7", + borderColor: "#F3AA78", + borderWidth: "3" + } + }, + { + name: "閭垫櫙搴�", + x: 800, + y: 400, + itemStyle: { + color: "#F8E2D7", + borderColor: "#F3AA78", + borderWidth: "3" + } + }, + { + name: "椴嶆槆", + x: 750, + y: 100, + itemStyle: { + color: "#DCE7EB", + borderColor: "#5F81A4", + borderWidth: "3" + } + }, + { + name: "鏂囬緳", + x: 850, + y: 100, + itemStyle: { + color: "#DCE7EB", + borderColor: "#5F81A4", + borderWidth: "3" + } + }, + { + name: "鍌呭簡璐�", + x: 950, + y: 50, + itemStyle: { + color: "#DCE7EB", + borderColor: "#5F81A4", + borderWidth: "3" + } + }, + { + name: "鎴愬厑", + x: 950, + y: 100, + itemStyle: { + color: "#DCE7EB", + borderColor: "#5F81A4", + borderWidth: "3" + } + }, + { + name: "鑳$帀鍧�", + x: 950, + y: 150, + itemStyle: { + color: "#DCE7EB", + borderColor: "#5F81A4", + borderWidth: "3" + } + }, + { + name: "瑁曠", + x: 950, + y: 200, + itemStyle: { + color: "#DCE7EB", + borderColor: "#5F81A4", + borderWidth: "3" + } + }, + { + name: "闄嗕箖鏄�", + x: 950, + y: 250, + itemStyle: { + color: "#DCE7EB", + borderColor: "#5F81A4", + borderWidth: "3" + } + }, + { + name: "鍒樹紶绁�", + x: 950, + y: 300, + itemStyle: { + color: "#DCE7EB", + borderColor: "#5F81A4", + borderWidth: "3" + } + }, + { + name: "閭佃瘹", + x: 950, + y: 350, + itemStyle: { + color: "#DCE7EB", + borderColor: "#5F81A4", + borderWidth: "3" + } + }, + { + name: "鏇惧浗钘�", + x: 1050, + y: 200, + itemStyle: { + color: "#E1E1E1", + borderColor: "#888888", + borderWidth: "3" + } + }, + { + name: "鏇惧浗钘�01", + x: 1050, + y: 50, + itemStyle: { + color: "#E1E1E1", + borderColor: "#888888", + borderWidth: "3" + } + }, + { + name: "鏇惧浗钘�02", + x: 1050, + y: 350, + itemStyle: { + color: "#E1E1E1", + borderColor: "#888888", + borderWidth: "3" + } + } + ], + links: [ + { + source: "钖涢洩", + target: "閭电櫥鐎�", + relationName: "甯堝緬", + hasArrow: "true" + }, + { + source: "閭电櫥鐎�", + target: "閭甸瞾鐬�", + relationName: "鐖跺瓙" + }, + { + source: "閭甸瞾鐬�", + target: "閭垫槬娉�", + relationName: "鐖跺瓙" + }, + { + source: "閭垫槬娉�", + target: "閭典笝鎵�", + relationName: "鍙斾緞" + }, + //鏇茬嚎 + { + source: "閭垫槬娉�", + target: "寰愰敠", + relationName: "鏈嬪弸", + //杩欓噷璁剧疆涓轰笉甯︾澶� + symbol: ["none", "none"], + lineStyle: { + color: "#6584B1", + curveness: -0.2 + } + }, + { + source: "閭典笝鎵�", + target: "閭垫櫙灏�", + relationName: "鐖跺瓙" + }, + { + source: "閭典笝鎵�", + target: "閭垫櫙搴�", + relationName: "鐖跺瓙" + }, + //鏇茬嚎 + { + source: "閭典笝鎵�", + target: "鍐鑺�", + relationName: "鏈嬪弸", + symbol: ["none", "none"], + lineStyle: { + color: "#6584B1", + curveness: -0.2 + } + }, + //鏇茬嚎 + { + source: "閭典笝鎵�", + target: "椴嶆槆", + relationName: "甯堝緬", + symbol: ["none", "none"], + lineStyle: { + color: "#6584B1", + curveness: 0.2 + } + }, + //鏇茬嚎 + { + source: "鍐鑺�", + target: "鏉庨缚绔�", + relationName: "鍚屽儦", + symbol: ["none", "none"], + lineStyle: { + color: "#6584B1", + curveness: -0.2 + } + }, + { + source: "閭垫櫙灏�", + target: "閭垫櫙搴�", + relationName: "鍏勫紵" + }, + { + source: "閭垫櫙搴�", + target: "閭垫櫙灏�", + relationName: "鍏勫紵" + }, + { + source: "閭垫櫙灏�", + target: "椴嶆槆", + relationName: "濮讳翰", + symbol: ["none", "none"], + lineStyle: { + color: "#6584B1", + curveness: -0.2 + } + }, + { + source: "閭垫櫙灏�", + target: "鏂囬緳", + relationName: "鏈嬪弸", + symbol: ["none", "none"], + lineStyle: { + color: "#6584B1", + curveness: 0.2 + } + }, + { + source: "閭垫櫙灏�", + target: "鍌呭簡璐�", + relationName: "鍚屽儦", + symbol: ["none", "none"], + lineStyle: { + color: "#6584B1", + curveness: -0.1 + } + }, + { + source: "閭垫櫙灏�", + target: "鎴愬厑", + relationName: "鍚屽儦", + symbol: ["none", "none"], + lineStyle: { + color: "#6584B1", + curveness: -0.2 + } + }, + { + source: "閭垫櫙灏�", + target: "鑳$帀鍧�", + relationName: "鍚屽儦", + symbol: ["none", "none"], + lineStyle: { + color: "#6584B1", + curveness: -0.2 + } + }, + { + source: "閭垫櫙灏�", + target: "瑁曠", + relationName: "鍚屽儦", + symbol: ["none", "none"], + lineStyle: { + color: "#6584B1", + curveness: -0.2 + } + }, + { + source: "閭垫櫙灏�", + target: "闄嗕箖鏄�", + relationName: "鍚屽儦", + symbol: ["none", "none"], + lineStyle: { + color: "#6584B1", + curveness: -0.2 + } + }, + { + source: "閭垫櫙灏�", + target: "鍒樹紶绁�", + relationName: "鍚屽儦", + symbol: ["none", "none"], + lineStyle: { + color: "#6584B1", + curveness: -0.2 + } + }, + { + source: "閭垫櫙灏�", + target: "閭佃瘹", + relationName: "鍚屽儦", + symbol: ["none", "none"], + lineStyle: { + color: "#6584B1", + curveness: -0.2 + } + }, + { + source: "鎴愬厑", + target: "鏇惧浗钘�", + relationName: "鍚屽儦", + symbol: ["none", "none"], + lineStyle: { + color: "#6584B1" + } + }, + { + source: "鑳$帀鍧�", + target: "鏇惧浗钘�", + relationName: "鍚屽儦", + symbol: ["none", "none"], + lineStyle: { + color: "#6584B1" + } + }, + { + source: "瑁曠", + target: "鏇惧浗钘�", + relationName: "鍚屽儦", + symbol: ["none", "none"], + lineStyle: { + color: "#6584B1" + } + }, + { + source: "闄嗕箖鏄�", + target: "鏇惧浗钘�", + relationName: "鍚屽儦", + symbol: ["none", "none"], + lineStyle: { + color: "#6584B1" + } + }, + { + source: "鍒樹紶绁�", + target: "鏇惧浗钘�", + relationName: "鍚屽儦", + symbol: ["none", "none"], + lineStyle: { + color: "#6584B1" + } + }, + { + source: "鎴愬厑", + target: "鏇惧浗钘�", + relationName: "鍚屽儦", + symbol: ["none", "none"], + lineStyle: { + color: "#6584B1" + } + }, + { + source: "鎴愬厑", + target: "鏇惧浗钘�", + relationName: "鍚屽儦", + symbol: ["none", "none"], + lineStyle: { + color: "#6584B1" + } + }, + { + source: "鎴愬厑", + target: "鏇惧浗钘�", + relationName: "鍚屽儦", + symbol: ["none", "none"], + lineStyle: { + color: "#6584B1" + } + }, + { + source: "鍌呭簡璐�", + target: "鏇惧浗钘�01", + relationName: "鍚屽儦", + symbol: ["none", "none"], + lineStyle: { + color: "#6584B1" + } + }, + { + source: "閭佃瘹", + target: "鏇惧浗钘�02", + relationName: "鍚屽儦", + symbol: ["none", "none"], + lineStyle: { + color: "#6584B1" + } + } + ], + socialMapping: true, + showType: "1" + }; + }, + onLoad(options) { + this.idIndex = options.id; + console.log("optionsoptionsoptions", options.id); + }, + mounted() { + // 鍒濆鍖� echarts + this.initBarChart(this.dataList, this.links); + }, + methods: { + showSocialMapping() { + this.socialMapping = !this.socialMapping; + let newDataList = []; + let newLinks = []; + if (this.socialMapping) { + newDataList = [...this.dataList]; + newLinks = [...this.links]; + } else { + newDataList = this.dataList.filter( + (item) => item.itemStyle.borderColor == "#F3AA78" + ); + newLinks = [...this.links]; + } + this.initBarChart(newDataList, newLinks); + }, + changeType(type) { + this.showType = type; + if (type == 1) { + setTimeout(() => { + this.socialMapping = true; + this.initBarChart(this.dataList, this.links); + }, 50); + } + }, + initBarChart(dataList, links) { + // WMBg + //閫氳繃 $ref 杩涜鎸傝浇 + var barChart = document.getElementById("barChart"); + let myChart = echarts.init(barChart); - let FontSize = 12; // 瀛椾綋澶у皬 - let BorderWidth = 2; // 杈规澶у皬 - let SymbolSize = 80; // 灏哄璺濈 - let Distance = 10; - // 涓嶅悓灏哄涓嬩慨鏀筫charts鐨勫瓧浣� - if (window.innerWidth > 2560 && window.innerWidth <= 3840) { - FontSize = 28 - BorderWidth = 5 - SymbolSize = 100 - Distance = 33 - } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) { - FontSize = 28 - BorderWidth = 4 - SymbolSize = 90 - Distance = 22 - } else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) { - FontSize = 18 - BorderWidth = 4 - SymbolSize = 70 - Distance = 22 - } + let FontSize = 12; // 瀛椾綋澶у皬 + let BorderWidth = 2; // 杈规澶у皬 + let SymbolSize = 80; // 灏哄璺濈 + let Distance = 10; + // 涓嶅悓灏哄涓嬩慨鏀筫charts鐨勫瓧浣� + if (window.innerWidth > 2560 && window.innerWidth <= 3840) { + FontSize = 28; + BorderWidth = 5; + SymbolSize = 100; + Distance = 33; + } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) { + FontSize = 28; + BorderWidth = 4; + SymbolSize = 90; + Distance = 22; + } else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) { + FontSize = 18; + BorderWidth = 4; + SymbolSize = 70; + Distance = 22; + } - let option = { - title: { - text: [""], - }, - backgroundColor: { - type: 'image', - image: '/static/image/WMBg.png', - repeat: 'repeat-x', // 鏄惁骞抽摵锛屽彲浠ユ槸 'repeat-x', 'repeat-y', 'no-repeat' - size: '100% 100%', // 鑳屾櫙鍥剧墖鐨勫昂瀵革紝鍙互鏄櫨鍒嗘瘮鎴栬�呭儚绱� - position: 'center center' // 鑳屾櫙鍥剧墖鐨勪綅缃紝鍙互鏄� top, bottom, middle 鎴栬�呯櫨鍒嗘瘮 - }, - tooltip: {}, - animationDurationUpdate: 1500, - animationEasingUpdate: "quinticInOut", - series: [{ - type: "graph", - layout: "none", - symbolSize: SymbolSize + 20, - //鏄惁鍏佽鐢ㄦ埛鎷栧姩鍥剧墖 - roam: false, - label: { - show: true, - color: 'black', // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹� - fontSize: FontSize, // 璁剧疆鏂囧瓧澶у皬 - }, - edgeSymbol: ["circle", "arrow"], - edgeSymbolSize: [4, 10], + let option = { + title: { + text: [""] + }, + backgroundColor: { + type: "image", + image: "/static/image/WMBg.png", + repeat: "repeat-x", // 鏄惁骞抽摵锛屽彲浠ユ槸 'repeat-x', 'repeat-y', 'no-repeat' + size: "100% 100%", // 鑳屾櫙鍥剧墖鐨勫昂瀵革紝鍙互鏄櫨鍒嗘瘮鎴栬�呭儚绱� + position: "center center" // 鑳屾櫙鍥剧墖鐨勪綅缃紝鍙互鏄� top, bottom, middle 鎴栬�呯櫨鍒嗘瘮 + }, + tooltip: {}, + animationEasingUpdate: "quinticInOut", + series: [ + { + type: "graph", + layout: "none", + symbolSize: SymbolSize + 20, + //鏄惁鍏佽鐢ㄦ埛鎷栧姩鍥剧墖 + roam: false, + label: { + show: true, + color: "black", // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹� + fontSize: FontSize // 璁剧疆鏂囧瓧澶у皬 + }, + edgeSymbol: ["circle", "arrow"], + edgeSymbolSize: [4, 10], - edgeLabel: { - show: true, - fontSize: FontSize, //鏇存敼涓よ�呭叧绯荤殑瀛椾綋 - position: "middle", - //杩欓噷璁剧疆鍏崇郴鏂囧瓧鏄惁鍜岀嚎娈甸噸鍙� - // padding: [0, 0], // 璋冩暣鍐呰竟璺濅互纭繚鏍囩涓庣嚎娈电揣瀵嗚创鍚� - // verticalAlign: 'middle', // 璁剧疆鏂囨湰鐨勫瀭鐩村榻愭柟寮忎负灞呬腑 - formatter: function(params) { - // params.data 鏄竟鐨勬暟鎹璞★紝浣犲彲浠ュ湪杩欓噷瀹氫箟鍏崇郴鍚� - // 渚嬪锛屼綘鍙互鏍规嵁 source 鍜� target 鐨勫悕绉版潵瀹氫箟鍏崇郴鍚� - return params.data.relationName || - "鐖跺瓙"; // 濡傛灉瀹氫箟浜� relationName 鍒欐樉绀哄畠锛屽惁鍒欐樉绀衡�滅埗瀛愨�� - }, - }, - //鍚勪釜鑺傜偣 - data: [{ - name: "钖涢洩", - x: 300, - y: 300, - itemStyle: { - color: "#F8E2D7", - borderColor: "#F3AA78", - borderWidth: "3", - }, - }, - { - name: "閭电櫥鐎�", - x: 400, - y: 300, - itemStyle: { - color: "#F8E2D7", - borderColor: "#F3AA78", - borderWidth: "3", - }, - }, - { - name: "閭甸瞾鐬�", - x: 500, - y: 300, - itemStyle: { - color: "#F8E2D7", - borderColor: "#F3AA78", - borderWidth: "3", - }, - }, - { - name: "閭垫槬娉�", - x: 600, - y: 300, - itemStyle: { - color: "#F8E2D7", - borderColor: "#F3AA78", - borderWidth: "3", - }, - }, - { - name: "寰愰敠", - x: 650, - y: 400, - itemStyle: { - color: "#DCE7EB", - borderColor: "#5F81A4", - borderWidth: "3", - }, - }, - { - name: "閭典笝鎵�", - x: 700, - y: 300, - itemStyle: { - color: "#F8E2D7", - borderColor: "#F3AA78", - borderWidth: "3", - }, - }, - { - name: "鍐鑺�", - x: 720, - y: 400, - itemStyle: { - color: "#DCE7EB", - borderColor: "#5F81A4", - borderWidth: "3", - }, - }, - { - name: "鏉庨缚绔�", - x: 740, - y: 500, - itemStyle: { - color: "#E1E1E1", - borderColor: "#888888", - borderWidth: "3", - }, - }, - { - name: "閭垫櫙灏�", - x: 800, - y: 200, - itemStyle: { - color: "#F8E2D7", - borderColor: "#F3AA78", - borderWidth: "3", - }, - }, - { - name: "閭垫櫙搴�", - x: 800, - y: 400, - itemStyle: { - color: "#F8E2D7", - borderColor: "#F3AA78", - borderWidth: "3", - }, - }, - { - name: "椴嶆槆", - x: 750, - y: 100, - itemStyle: { - color: "#DCE7EB", - borderColor: "#5F81A4", - borderWidth: "3", - }, - }, - { - name: "鏂囬緳", - x: 850, - y: 100, - itemStyle: { - color: "#DCE7EB", - borderColor: "#5F81A4", - borderWidth: "3", - }, - }, - { - name: "鍌呭簡璐�", - x: 950, - y: 50, - itemStyle: { - color: "#DCE7EB", - borderColor: "#5F81A4", - borderWidth: "3", - }, - }, - { - name: "鎴愬厑", - x: 950, - y: 100, - itemStyle: { - color: "#DCE7EB", - borderColor: "#5F81A4", - borderWidth: "3", - }, - }, - { - name: "鑳$帀鍧�", - x: 950, - y: 150, - itemStyle: { - color: "#DCE7EB", - borderColor: "#5F81A4", - borderWidth: "3", - }, - }, - { - name: "瑁曠", - x: 950, - y: 200, - itemStyle: { - color: "#DCE7EB", - borderColor: "#5F81A4", - borderWidth: "3", - }, - }, - { - name: "闄嗕箖鏄�", - x: 950, - y: 250, - itemStyle: { - color: "#DCE7EB", - borderColor: "#5F81A4", - borderWidth: "3", - }, - }, - { - name: "鍒樹紶绁�", - x: 950, - y: 300, - itemStyle: { - color: "#DCE7EB", - borderColor: "#5F81A4", - borderWidth: "3", - }, - }, - { - name: "閭佃瘹", - x: 950, - y: 350, - itemStyle: { - color: "#DCE7EB", - borderColor: "#5F81A4", - borderWidth: "3", - }, - }, - { - name: "鏇惧浗钘�", - x: 1050, - y: 200, - itemStyle: { - color: "#E1E1E1", - borderColor: "#888888", - borderWidth: "3", - }, - }, - { - name: "鏇惧浗钘�01", - x: 1050, - y: 50, - itemStyle: { - color: "#E1E1E1", - borderColor: "#888888", - borderWidth: "3", - }, - }, - { - name: "鏇惧浗钘�02", - x: 1050, - y: 350, - itemStyle: { - color: "#E1E1E1", - borderColor: "#888888", - borderWidth: "3", - }, - }, - ], - //鍏崇郴杩炴帴 - links: [{ - source: "钖涢洩", - target: "閭电櫥鐎�", - relationName: "甯堝緬", - hasArrow: "true", - }, - { - source: "閭电櫥鐎�", - target: "閭甸瞾鐬�", - relationName: "鐖跺瓙", - }, - { - source: "閭甸瞾鐬�", - target: "閭垫槬娉�", - relationName: "鐖跺瓙", - }, - { - source: "閭垫槬娉�", - target: "閭典笝鎵�", - relationName: "鍙斾緞", - }, - //鏇茬嚎 - { - source: "閭垫槬娉�", - target: "寰愰敠", - relationName: "鏈嬪弸", - //杩欓噷璁剧疆涓轰笉甯︾澶� - symbol: ["none", "none"], - lineStyle: { - color: "#6584B1", - curveness: -0.2, - }, - }, - { - source: "閭典笝鎵�", - target: "閭垫櫙灏�", - relationName: "鐖跺瓙", - }, - { - source: "閭典笝鎵�", - target: "閭垫櫙搴�", - relationName: "鐖跺瓙", - }, - //鏇茬嚎 - { - source: "閭典笝鎵�", - target: "鍐鑺�", - relationName: "鏈嬪弸", - symbol: ["none", "none"], - lineStyle: { - color: "#6584B1", - curveness: -0.2, - }, - }, - //鏇茬嚎 - { - source: "閭典笝鎵�", - target: "椴嶆槆", - relationName: "甯堝緬", - symbol: ["none", "none"], - lineStyle: { - color: "#6584B1", - curveness: 0.2, - }, - }, - //鏇茬嚎 - { - source: "鍐鑺�", - target: "鏉庨缚绔�", - relationName: "鍚屽儦", - symbol: ["none", "none"], - lineStyle: { - color: "#6584B1", - curveness: -0.2, - }, - }, - { - source: "閭垫櫙灏�", - target: "閭垫櫙搴�", - relationName: "鍏勫紵", - }, - { - source: "閭垫櫙搴�", - target: "閭垫櫙灏�", - relationName: "鍏勫紵", - }, - { - source: "閭垫櫙灏�", - target: "椴嶆槆", - relationName: "濮讳翰", - symbol: ["none", "none"], - lineStyle: { - color: "#6584B1", - curveness: -0.2, - }, - }, - { - source: "閭垫櫙灏�", - target: "鏂囬緳", - relationName: "鏈嬪弸", - symbol: ["none", "none"], - lineStyle: { - color: "#6584B1", - curveness: 0.2, - }, - }, - { - source: "閭垫櫙灏�", - target: "鍌呭簡璐�", - relationName: "鍚屽儦", - symbol: ["none", "none"], - lineStyle: { - color: "#6584B1", - curveness: -0.1, - }, - }, - { - source: "閭垫櫙灏�", - target: "鎴愬厑", - relationName: "鍚屽儦", - symbol: ["none", "none"], - lineStyle: { - color: "#6584B1", - curveness: -0.2, - }, - }, - { - source: "閭垫櫙灏�", - target: "鑳$帀鍧�", - relationName: "鍚屽儦", - symbol: ["none", "none"], - lineStyle: { - color: "#6584B1", - curveness: -0.2, - }, - }, - { - source: "閭垫櫙灏�", - target: "瑁曠", - relationName: "鍚屽儦", - symbol: ["none", "none"], - lineStyle: { - color: "#6584B1", - curveness: -0.2, - }, - }, - { - source: "閭垫櫙灏�", - target: "闄嗕箖鏄�", - relationName: "鍚屽儦", - symbol: ["none", "none"], - lineStyle: { - color: "#6584B1", - curveness: -0.2, - }, - }, - { - source: "閭垫櫙灏�", - target: "鍒樹紶绁�", - relationName: "鍚屽儦", - symbol: ["none", "none"], - lineStyle: { - color: "#6584B1", - curveness: -0.2, - }, - }, - { - source: "閭垫櫙灏�", - target: "閭佃瘹", - relationName: "鍚屽儦", - symbol: ["none", "none"], - lineStyle: { - color: "#6584B1", - curveness: -0.2, - }, - }, - { - source: "鎴愬厑", - target: "鏇惧浗钘�", - relationName: "鍚屽儦", - symbol: ["none", "none"], - lineStyle: { - color: "#6584B1", - }, - }, - { - source: "鑳$帀鍧�", - target: "鏇惧浗钘�", - relationName: "鍚屽儦", - symbol: ["none", "none"], - lineStyle: { - color: "#6584B1", - }, - }, - { - source: "瑁曠", - target: "鏇惧浗钘�", - relationName: "鍚屽儦", - symbol: ["none", "none"], - lineStyle: { - color: "#6584B1", - }, - }, - { - source: "闄嗕箖鏄�", - target: "鏇惧浗钘�", - relationName: "鍚屽儦", - symbol: ["none", "none"], - lineStyle: { - color: "#6584B1", - }, - }, - { - source: "鍒樹紶绁�", - target: "鏇惧浗钘�", - relationName: "鍚屽儦", - symbol: ["none", "none"], - lineStyle: { - color: "#6584B1", - }, - }, - { - source: "鎴愬厑", - target: "鏇惧浗钘�", - relationName: "鍚屽儦", - symbol: ["none", "none"], - lineStyle: { - color: "#6584B1", - }, - }, - { - source: "鎴愬厑", - target: "鏇惧浗钘�", - relationName: "鍚屽儦", - symbol: ["none", "none"], - lineStyle: { - color: "#6584B1", - }, - }, - { - source: "鎴愬厑", - target: "鏇惧浗钘�", - relationName: "鍚屽儦", - symbol: ["none", "none"], - lineStyle: { - color: "#6584B1", - }, - }, - { - source: "鍌呭簡璐�", - target: "鏇惧浗钘�01", - relationName: "鍚屽儦", - symbol: ["none", "none"], - lineStyle: { - color: "#6584B1", - }, - }, - { - source: "閭佃瘹", - target: "鏇惧浗钘�02", - relationName: "鍚屽儦", - symbol: ["none", "none"], - lineStyle: { - color: "#6584B1", - }, - }, - ], - lineStyle: { - color: "#000000", - opacity: 0.9, - width: 2, - curveness: 0, - }, - }, ], - }; - //杩涜娓叉煋 - myChart.setOption(option); - }, - // 杩斿洖鎸夐挳 - goBack() { - // uuni.redirectTo(); - uni.redirectTo({ - url: '/pages/index/index' - }) - }, - } - } + edgeLabel: { + show: true, + fontSize: FontSize, //鏇存敼涓よ�呭叧绯荤殑瀛椾綋 + position: "middle", + //杩欓噷璁剧疆鍏崇郴鏂囧瓧鏄惁鍜岀嚎娈甸噸鍙� + // padding: [0, 0], // 璋冩暣鍐呰竟璺濅互纭繚鏍囩涓庣嚎娈电揣瀵嗚创鍚� + // verticalAlign: 'middle', // 璁剧疆鏂囨湰鐨勫瀭鐩村榻愭柟寮忎负灞呬腑 + formatter: function (params) { + // params.data 鏄竟鐨勬暟鎹璞★紝浣犲彲浠ュ湪杩欓噷瀹氫箟鍏崇郴鍚� + // 渚嬪锛屼綘鍙互鏍规嵁 source 鍜� target 鐨勫悕绉版潵瀹氫箟鍏崇郴鍚� + return params.data.relationName || "鐖跺瓙"; // 濡傛灉瀹氫箟浜� relationName 鍒欐樉绀哄畠锛屽惁鍒欐樉绀衡�滅埗瀛愨�� + } + }, + //鍚勪釜鑺傜偣 + data: dataList, //鍏崇郴杩炴帴 + links: links, + lineStyle: { + color: "#000000", + opacity: 0.9, + width: 2, + curveness: 0 + } + } + ] + }; + //杩涜娓叉煋 + myChart.setOption(option); + }, + // 杩斿洖鎸夐挳 + goBack() { + this.$router.go(-1); + } + } +}; </script> <style scoped> - .Lists { - li { - /* background-color: #e4ebf3; - border: 1rpx solid #5778a2; - padding: 5rpx 10rpx; - font-size: 18rpx; */ - width: 0.96rem; - height: .3rem; - border: 1px solid #DA7A2B; - line-height: .3rem; - text-align: center; - font-size: .14rem; - } - } - .MiddeBack { - width: 0.6rem; - height: 0.24rem; - font-size: .12rem; - padding: 0; - - } - .barChart { - width: 100vw; - height: 80vh; - } -</style> \ No newline at end of file +.tabBox .tabItem { + width: 0.96rem; + height: 0.3rem; + border: 1px solid #da7a2b; + line-height: 0.3rem; + text-align: center; + font-size: 0.14rem; + background-color: #fff; + color: #da7a2b; + cursor: pointer; +} + +.tabBox .tabItem.active { + background-color: #da7a2b; + color: #fff; +} + +.MiddeBack { + width: 0.6rem; + height: 0.24rem; + font-size: 0.12rem; + padding: 0; +} +.barChart { + width: 100vw; + height: 80vh; +} + +/* 鍥句緥 */ +.legendBox { + width: 100%; + height: 0.6rem; + position: relative; + padding-top: 0.1rem; + display: flex; + justify-content: center; +} +.socialMappingBox { + position: absolute; + left: 1.2rem; + display: flex; + align-items: center; + padding: 0.06rem 0.2rem; + background: #fff; + box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.5); + border-radius: 90px; + cursor: pointer; +} + +.socialMappingBox .icon { + width: 0.12rem; + height: 0.12rem; + border-radius: 50%; + margin-right: 0.06rem; +} + +.legend { + display: flex; + align-items: center; + margin: 0 0.1rem; +} + +.legend .icon { + width: 0.12rem; + height: 0.12rem; + border-radius: 50%; + margin-right: 0.06rem; +} + +.cultureBox { + width: 100%; + height: 80vh; + background: url("@/static/image/WMBg.png"); + background-size: 100% 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.cultureItem { + width: 6.6rem; + margin-top: 0.4rem; + background: #fff; + border: 2px solid #d8d8d8; + display: flex; + position: relative; + padding: 0.16rem 0.16rem 0.4rem; +} + +.cultureItem .imgBox { + width: 0.8rem; + margin-right: 0.4rem; +} + +.cultureItem img { + width: 100%; +} + +.cultureItem p { + flex: 1; + overflow: hidden; + line-height: 1.5; + font-size: 0.14rem; +} + +.cultureItem h4 { + position: absolute; + bottom: 0.16rem; + right: 0.12rem; +} +</style> diff --git a/src/static/image/inherit/icon1.png b/src/static/image/inherit/icon1.png new file mode 100644 index 0000000..c7b2d24 --- /dev/null +++ b/src/static/image/inherit/icon1.png Binary files differ diff --git a/src/static/image/inherit/icon2.png b/src/static/image/inherit/icon2.png new file mode 100644 index 0000000..c2af5ad --- /dev/null +++ b/src/static/image/inherit/icon2.png Binary files differ diff --git a/src/static/image/inherit/icon3.png b/src/static/image/inherit/icon3.png new file mode 100644 index 0000000..c7fe990 --- /dev/null +++ b/src/static/image/inherit/icon3.png Binary files differ -- Gitblit v1.9.1