From 29a02350b873fa6339a7535fa929697fec9a8f84 Mon Sep 17 00:00:00 2001 From: mh-two-thousand-and-two <17391232786@163.com> Date: 星期三, 03 四月 2024 18:44:07 +0800 Subject: [PATCH] 三 --- static/image/fangda.png | 0 components/table1/table1.vue | 2 pages/dataDisplay/dataDisplay.vue | 117 + static/initialize.css | 41 pages/interchannel/interchannel.vue | 169 + pages/changePassword/changePassword.vue | 596 ++++++ pages/repository/repository.vue | 186 + pages/zhongyi/zhongyi.vue | 752 +++++++- components/headNav/headNav.vue | 175 + static/image/logo2.png | 0 static/image/yinyong.png | 0 components/advancedSearch/advancedSearch.vue | 9 pages/territory/territory.vue | 236 ++ components/footer/footer.vue | 40 pages/characterMap/characterMap.vue | 269 ++ static/image/学派Bg.png | 0 components/form/form.vue | 2 pages/forgetPass/forgetPass.vue | 96 + pages/index/index.vue | 169 + static/image/personageBg.png | 0 static/image/logo3.png | 0 pages.json | 9 pages/Login/Login.vue | 119 + pages/TcmSystem/TcmSystem.vue | 817 +++++++- pages/AcademicHistory/AcademicHistory.vue | 498 ++++- /dev/null | 1 static/image/WMBg.png | 0 pages/characterRelation/characterRelation.vue | 83 pages/knowledgeBase/knowledgeBase.vue | 529 +++++ static/image/logo4.png | 0 static/image/修改密码.png | 0 pages/Register/Register.vue | 187 ++ static/image/X.png | 0 33 files changed, 4,355 insertions(+), 747 deletions(-) diff --git a/TCM_CharacterLibrary b/TCM_CharacterLibrary deleted file mode 160000 index bd37b0a..0000000 --- a/TCM_CharacterLibrary +++ /dev/null @@ -1 +0,0 @@ -Subproject commit bd37b0a842b37ab5e0eb016b82cd757c0cc7da2d diff --git a/components/advancedSearch/advancedSearch.vue b/components/advancedSearch/advancedSearch.vue index a8f56f0..a0dbb0d 100644 --- a/components/advancedSearch/advancedSearch.vue +++ b/components/advancedSearch/advancedSearch.vue @@ -1,9 +1,8 @@ <template> <view style="height: 100% ;"> <view class="flex flex-center" style="margin: 20rpx 0;"> - <luanqing-search class="search_bar" @onSearch="onSearch" :buttonText="buttonText" :isSearchTrue="isSearchTrue"></luanqing-search> - <view class="" v-if="isAvancedTrue" @click="isAvancedClick" - style="color:#244A7B ;font-size: .12rem;margin-left: .31rem;cursor: pointer;">楂樼骇鎼滅储 锕�</view> + <luanqing-search class="search_bar" @onSearch="onSearch" :buttonText="buttonText" :isSearchTrue="isSearchTrue" :placehold="placehold"></luanqing-search> + <view class="advancedSea" v-if="isAvancedTrue" @click="isAvancedClick" style="color:#244A7B ;font-size: .12rem;margin-left: .31rem;cursor: pointer;">楂樼骇鎼滅储 锕�</view> </view> <!-- 楂樼骇鎼滅储 --> <view class="" v-if="isAdvancedSearch" style="padding: 0 1.24rem; margin-bottom: .18rem;"> @@ -35,7 +34,9 @@ return '鎼滅储' } }, - + placehold:{ + type:String + } }, components: { MyForm diff --git a/components/footer/footer.vue b/components/footer/footer.vue index e227a2a..d002095 100644 --- a/components/footer/footer.vue +++ b/components/footer/footer.vue @@ -1,13 +1,13 @@ <template> - <view class="BottomColumn flex flex-center"> + <view class="BottomColumn flex flex-center" :style="{'position':isLocation==true?'fixed':'','marginTop':isMarginTop+'rem'}"> <view class="Bbar flex"> - <img style="display: block;margin-right: .22rem;width: .52rem;height: .52rem;" src="@/static/image/logo.png" alt="" srcset="" /> - <view class="font-family" style="color: #2C2C2C; font-size: .14rem;line-height: normal;font-weight: 600;"> + <img style="display: block;margin-right: .22rem;width: .4rem;height: .4rem;" src="@/static/image/logo.png" + alt="" srcset="" /> + <view class="font-family" style="color: #2C2C2C; font-size: .12rem;line-height: 1.5;"> <view class=""> - 92017涓浗涓尰绉戝闄腑鍖昏嵂淇℃伅鐮旂┒鎵�鐗堟潈鎵�鏈変含ICP澶囦笟鏂瑰畨澶т笟鏂逛笟鏂� + 漏2017 涓浗涓尰绉戝闄腑鍖昏嵂淇℃伅鐮旂┒鎵�鐗堟潈鎵�鏈� 浜琁CP澶�********鍙� </view> - <view class="">鍦板潃:鍖椾含甯備笢鍩庡尯涓滅洿闂ㄥ唴鍗楀皬琛�16鍙烽偖缂�:100700 - 鐢佃瘽:8610-64089611Email:tcmbase@126.com</view> + <view class="">鍦板潃锛氬寳浜競涓滃煄鍖轰笢鐩撮棬鍐呭崡灏忚16鍙� 閭紪锛�100700 鐢佃瘽锛�8610-64089611 Email: tcmbase@126.com</view> </view> </view> </view> @@ -15,26 +15,44 @@ <script> export default { - name:"footer", + name: "footer", + props: { + isLocation: { + type: Boolean, + default () { + return true + } + }, + isMarginTop: { + type: Number, + default () { + return 0 + } + }, + }, data() { return { - + }; } } </script> <style scoped> -.BottomColumn { - position: fixed; - left: 0px; + .BottomColumn { + /* position: sticky; + top: 0; */ + /* position: fixed; */ + /* left: 0px; */ bottom: 0px; + z-index: 999999999999999999999999999999999999999999; padding: .19rem 0; width: 100%; background-color: #e6eff8; font-size: 10px; color: #000; + /* margin-top: 1rem; */ .Bbar { img { width: 60rpx; diff --git a/components/form/form.vue b/components/form/form.vue index 9d79a6b..c991834 100644 --- a/components/form/form.vue +++ b/components/form/form.vue @@ -13,7 +13,7 @@ </el-form-item> <!-- 鍏朵粬琛ㄥ崟椤圭渷鐣� --> <!-- <el-form-item style="display:block; "> --> - <view class="flex flex-center"> + <view class="flex flex-center Formbtn"> <el-button style="background-color: #244A7B;color: #fff;" size="mini" @click="handleSubmit">鎻愪氦</el-button> <el-button type="info" plain size="mini" @click="handleReset">閲嶇疆</el-button> diff --git a/components/headNav/headNav.vue b/components/headNav/headNav.vue index 2f106c4..0db4e57 100644 --- a/components/headNav/headNav.vue +++ b/components/headNav/headNav.vue @@ -1,26 +1,34 @@ <template> - <view> + <view class="headNav"> <view class="NavTop flex" :style="{backgroundImage: 'url('+ bg + ')'}"> - <view class="" style="width: .34rem;height: .34rem;" @click="menuNav = !menuNav"><img + <view class="" 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="search-container" style="margin-right: .30rem;"> + <!-- <view class="search-container" style="margin-right: .30rem;"> <view :class="{ 'expanded': isExpanded ,'search-bar':isExpanded}"> <input v-if="isExpanded" type="text" @blur="InputBlur" class="search-input" v-model="searchInput" placeholder="璇疯緭鍏ユ悳绱㈠唴瀹�" /> - <!-- <img - src=""></img> --> - <view class="search-logo" @click="toggleSearch" style="background-color: #000;border-radius: 50%;margin-top: -4rpx;"></view> + <view class="search-logo" @click="toggleSearch" + style="background-color: #000;border-radius: 50%;margin-top: -4rpx;"></view> </view> + </view> --> + <view class="flex searchCss" :style="{'backgroundColor': isExpanded==true?'#fff':''}" + style="overflow: hidden; border-radius: .5rem; width: 2.33rem;margin-right: .30rem;justify-content: flex-end;"> + <input :style="{'display': isExpanded == true ? 'block' : 'none'}" type="text" + style="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> <!-- <img style="border-radius: 50%;display: inline-block;" src="../../static/image/search.png" alt="" /> --> - <img src="@/static/image/profile.svg" alt="" /> + <img @click="changePassword" src="@/static/image/profile.svg" alt="" /> <img src="@/static/image/quote.svg" style="margin-right: 0;" alt="" /> </view> </view> @@ -29,28 +37,29 @@ <!-- 鑳屾櫙 --> <img class="leftListBgImage" src="@/static/image/leftListBg.png" alt="" /> <view class="" style="position: relative;z-index: 999;"> - <view class="flex" style="justify-content: center;margin: .52rem 0 .46rem 0;"> - <img src="@/static/image/logo.png" style="width: 100rpx;height: 100rpx;"></img> + <view class="flex flex-center LeftLogo"> + <!-- <img src="@/static/image/logo.png" ></img> --> + <view class="img"></view> </view> - <el-menu default-active="1" active-text-color="#ffffff" class="el-menu-vertical-demo" + <el-menu :default-active="idIndex" active-text-color="#ffffff" class="el-menu-vertical-demo" @select="handleSelect"> - <el-menu-item index="1" style=" border-radius: 30px;"> + <el-menu-item index="0"> <span slot="title">棣栭〉</span> </el-menu-item> - <el-menu-item index="2"> + <el-menu-item index="1"> <span slot="title">涓尰浜虹墿鏁版嵁搴�</span> </el-menu-item> - <el-menu-item index="3"> + <el-menu-item index="2"> <span slot="title">涓栧尰鍖诲鏁版嵁搴�</span> </el-menu-item> - <el-menu-item index="4"> + <el-menu-item index="3"> <span slot="title">涓尰鍖诲娴佹淳</span> </el-menu-item> - <el-menu-item index="5"> + <el-menu-item index="4"> <span slot="title">涓尰鍦板煙鍥捐氨</span> </el-menu-item> - <el-menu-item index="6"> - <span slot="title">涓尰鍦板煙鍥捐氨</span> + <el-menu-item index="5"> + <span slot="title">涓尰鍖讳簨鍒跺害</span> </el-menu-item> </el-menu> </view> @@ -67,6 +76,18 @@ export default { name: "headNav", props: { + text:{ + type:String, + default () { + return '鏍囬' + } + }, + searchBg :{ + type: Boolean, + default () { + return true + } + }, bg: { type: String, default () { @@ -77,6 +98,12 @@ type: String, default () { return '/static/image/line.png' + } + }, + idIndex: { + type: String, + default () { + return '1' } } }, @@ -89,35 +116,41 @@ }; }, methods: { + // 淇敼瀵嗙爜 + changePassword() { + uni.navigateTo({ + url: '/pages/changePassword/changePassword' + }) + }, aaa() { console.log('ss'); }, handleSelect(index) { console.log(index); - if (index === '1') { - // uni.navigateTo({ - // url: '/pages/index/index' - // }); + if (index === '0') { + uni.navigateTo({ + url: '/pages/index/index?id=' + 0 + }); + } else if (index === '1') { + uni.navigateTo({ + url: '/pages/repository/repository?id=' + 1 + }); } else if (index === '2') { - // uni.navigateTo({ - // url: '/pages/option2Page' - // }); + uni.navigateTo({ + url: '/pages/zhongyi/zhongyi?id='+2 + }); } else if (index === '3') { - // uni.navigateTo({ - // url: '/pages/option3Page' - // }); + uni.navigateTo({ + url: '/pages/dataDisplay/dataDisplay?id=' + 3 + }); } else if (index === '4') { - // uni.navigateTo({ - // url: '/pages/option3Page' - // }); + uni.navigateTo({ + url: '/pages/territory/territory?id=' + 4 + }); } else if (index === '5') { - // uni.navigateTo({ - // url: '/pages/option3Page' - // }); - } else if (index === '6') { - // uni.navigateTo({ - // url: '/pages/option3Page' - // }); + uni.navigateTo({ + url: '/pages/TcmSystem/TcmSystem?id=' + 5 + }); } }, // 鎼滅储妗嗙殑鐨勭Щ鍑� @@ -128,7 +161,7 @@ }, // 鍒囨崲鎼滅储妗嗙殑灞曞紑鍜屾敹璧风姸鎬� toggleSearch() { - console.log(this.searchInput); + // console.log('鎾掓棪鑼冨痉钀ㄥ彂鐢熺殑',this.searchInput); this.isExpanded = !this.isExpanded; this.$nextTick(() => { if (this.searchInput.trim() !== '') { @@ -146,8 +179,60 @@ </script> <style scoped> + .LeftLogo { + width: 100%; + margin: .52rem 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; */ + } + } + + @media screen and (min-width:2560px)and (max-width:3840px) { + + ::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: .5rem; + + } + + .LeftLogo .img { + background-image: url(@/static/image/logo.png); + } + } + + ::v-deep .uni-input-placeholder { + padding-left: .05rem; + } + + .headNav { + /* 绮樻�у畾浣� */ + position: sticky; + top: 0; + z-index: 9999999999999999999999999999999999999999999999 !important; + } + .NavTop { /* background: url(@/static/image/topBg.png); */ + background-size: 100% 100%; padding: .16rem .24rem; color: #fff !important; @@ -266,20 +351,22 @@ ::v-deep .el-menu .is-active { background-color: #244A7B !important; - border-radius: 30px; + border-radius: .5rem; /* padding: 0 .14rem !important; */ } .el-menu-item { height: .34rem; + line-height: .3rem; font-size: .16rem; - text-align: center; font-weight: 500; - margin: .13rem .14rem !important; - display: flex; + margin: .13rem .14rem !important; + /* display: flex; justify-content: center; - align-items: center; + align-items: center; */ + text-align: left; + padding-left: .4rem !important; } ::v-deep .el-dialog__body { diff --git a/components/table1/table1.vue b/components/table1/table1.vue index ac388df..646c2b0 100644 --- a/components/table1/table1.vue +++ b/components/table1/table1.vue @@ -1,6 +1,6 @@ <template> <div> - <el-table :max-height="height" :data="data" > + <el-table :min-height="height" :data="data" > <el-table-column min-width="110" :sort-method="sortAge" v-for="column in columns" :key="column.prop" :label="column.label" header-align="center"> <template slot-scope="scope" class="font-family"> <template v-if="column.type === 'image'"> diff --git a/pages.json b/pages.json index 176830b..0d7b064 100644 --- a/pages.json +++ b/pages.json @@ -122,6 +122,15 @@ "enablePullDownRefresh" : false, "navigationStyle": "custom" } + }, + { + "path" : "pages/changePassword/changePassword", + "style" : + { + "navigationBarTitleText" : "", + "enablePullDownRefresh" : false, + "navigationStyle": "custom" + } }], "globalStyle": { "navigationStyle": "custom" diff --git a/pages/AcademicHistory/AcademicHistory.vue b/pages/AcademicHistory/AcademicHistory.vue index 1263fb4..27865e4 100644 --- a/pages/AcademicHistory/AcademicHistory.vue +++ b/pages/AcademicHistory/AcademicHistory.vue @@ -1,50 +1,39 @@ <template> <view> - <view class="NavTop flex"> - <view class=""><img src="../../static/涓尰浜虹墿鐭ヨ瘑搴�0201/涓夋潯鏉�.png" alt="" /></view> - <view class="">鍘嗕唬瀛︽湳娴佹淳</view> - <view class="NavTopr"> - <img src="../../static/涓尰浜虹墿鐭ヨ瘑搴�0201/涓夋潯鏉�.png" alt="" /> - <img src="../../static/涓尰浜虹墿鐭ヨ瘑搴�0201/涓夋潯鏉�.png" alt="" /> - <img src="../../static/涓尰浜虹墿鐭ヨ瘑搴�0201/涓夋潯鏉�.png" alt="" /> - </view> - </view> + <!-- 椤堕儴瀵艰埅 --> + <headNav :idIndex="idIndex" text="鍘嗕唬瀛︽湳娴佹淳"/> <view class="Midde flex"> - <view class="MiddeBack">杩斿洖</view> + <!-- <view class="MiddeBack">杩斿洖</view> --> + <el-button class="MiddeBack flex flex-center" @click="goBack">杩斿洖</el-button> <view class="flex flex-center flex-column"> - <view class="" style="font-weight: 900;margin-bottom:20rpx ;">娌抽棿鍥捐氨</view> + <view class="" style="font-weight: 900;margin-bottom:.2rem ;font-size: .26rem;line-height: 1;">娌抽棿鍥捐氨 + </view> <ul class="flex Lists"> - <li class="flex"> - <view class="" - style="margin-right: 10rpx; width: 20rpx;height: 20rpx;border-radius: 50%;background-color: #5e7ea5;"> - </view> - <view class="">骞呭害钀ㄨ姮</view> + <li @click="ListClick" style="background-color: #fff;color: #597AA5;"> + 鎾掑湴鏂� </li> - <li class="flex"> - <view class="" - style="margin-right: 10rpx; width: 20rpx;height: 20rpx;border-radius: 50%;background-color: #5e7ea5;"> - </view> - <view class="">骞呭害钀ㄨ姮</view> + <!-- /pages/AcademicHistory/AcademicHistory --> + <li style="background-color: #597AA5;color: #fff;"> + 鎾掑湴鏂� </li> - <li class="flex"> - <view class="" - style="margin-right: 10rpx; width: 20rpx;height: 20rpx;border-radius: 50%;background-color: #5e7ea5;"> - </view> - <view class="">骞呭害钀ㄨ姮</view> - </li> - <li class="flex"> - <view class="" - style="margin-right: 10rpx; width: 20rpx;height: 20rpx;border-radius: 50%;background-color: #5e7ea5;"> - </view> - <view class="">骞呭害钀ㄨ姮</view> - </li> - </ul> </view> <view class=""></view> </view> + <view class="flex flex-center" style="width: 100%; margin: .2rem 0;"> + <ul class="flex"> + <li style="" class="school1" v-for="(item,index) in dynasty" :key="item.id"> + <view class="flex flex-center font-family school" + style="font-weight: 500; border-radius: .3rem; padding: .06rem .15rem; color: #2C2C2C; font-size: .12rem; margin-top: .03rem;margin-right: .1rem;background-color: #fff;"> + <view class="" :style="{background:item.color}" + style="margin-right: .07rem; width: .12rem;height: .12rem;border-radius: 50%;"></view> + <view class="" style="color: #2C2C2C;font-size: .12rem;">{{item.name}}</view> + </view> + </li> + </ul> + </view> <view class="Bottom"> - <view id="main" style="width: 100vw; height: 500px;"></view> + <view id="main" style="width: 100vw; height: 5rem;"></view> </view> </view> </template> @@ -54,127 +43,324 @@ export default { data() { return { - + // 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ + idIndex:0, + dynasty: [{ + name: '浠h〃浜虹墿', + color: '#597AA5', + id: 1 + }, { + name: '閲嶈鍖诲', + color: '#DA7A2B', + id: 2 + }, { + name: '鍏崇郴鏂囩尞', + color: '#9E9E9E', + id: 3 + }] } }, + onLoad(options) { + this.idIndex = options.id + console.log('optionsoptionsoptions',options.id); + }, methods: { + goBack() { + // uuni.redirectTo(); + uni.redirectTo({ + url: '/pages/index/index' + }) + }, + ListClick() { + uni.navigateTo({ + url: '/pages/interchannel/interchannel?id='+this.idIndex + }) + }, innt() { this.$nextTick(() => { - var chartDom = document.getElementById('main'); // 鑾峰彇HTML涓殑鍏冪礌锛屾澶勫亣璁炬湁涓�涓猧d涓�'main'鐨勫厓绱犱綔涓哄浘琛ㄥ鍣� - var myChart = echarts.init(chartDom); // 鍒濆鍖杄charts瀹炰緥锛屽苟灏嗗叾涓庡浘琛ㄥ鍣ㄧ粦瀹� - var option; // 瀹氫箟鍙橀噺option鏉ュ瓨鍌ㄥ浘琛ㄧ殑閰嶇疆椤� + // var chartDom = document.getElementById('main'); // 鑾峰彇HTML涓殑鍏冪礌锛屾澶勫亣璁炬湁涓�涓猧d涓�'main'鐨勫厓绱犱綔涓哄浘琛ㄥ鍣� + // var myChart = echarts.init(chartDom); // 鍒濆鍖杄charts瀹炰緥锛屽苟灏嗗叾涓庡浘琛ㄥ鍣ㄧ粦瀹� + // var option; // 瀹氫箟鍙橀噺option鏉ュ瓨鍌ㄥ浘琛ㄧ殑閰嶇疆椤� + // option = { + // // title: { + // // text: 'Basic Graph' // 鍥捐〃鏍囬涓�'Basic Graph' + // // }, + // tooltip: {}, // 榧犳爣鎮仠鏃舵樉绀虹殑鎻愮ず妗� + // animationDurationUpdate: 1500, // 鏁版嵁鏇存柊鏃剁殑鍔ㄧ敾鏃堕暱 + // animationEasingUpdate: 'quinticInOut', // 鏁版嵁鏇存柊鏃剁殑鍔ㄧ敾鏁堟灉 + // series: [{ + // type: 'graph', // 鍥捐〃绫诲瀷涓�'graph' + // layout: 'none', // 鍥捐〃甯冨眬鏂瑰紡涓�'none'锛屽嵆鑺傜偣浣嶇疆鐢眡鍜寉鍧愭爣鎸囧畾 + // symbolSize: 150, // 鑺傜偣鐨勫ぇ灏� + // roam: false, // 鏄惁寮�鍚极娓革紝鍗冲彲浠ユ嫋鍔ㄥ拰缂╂斁鍥捐〃 + // label: { + // show: true, // 鏄惁鏄剧ず鑺傜偣涓婄殑鏍囩 + // textStyle: { + // fontSize: 32, // 璁剧疆瀛椾綋澶у皬涓�12 + // } + // }, + // edgeSymbol: ['circle', 'arrow'], // 杈圭殑璧峰鍜岀粨鏉熺澶存牱寮� + // edgeSymbolSize: [10, 10], // 杈圭殑璧峰鍜岀粨鏉熺澶村ぇ灏� + // edgeLabel: { + // fontSize: 40, // 杈圭殑鏍囩瀛椾綋澶у皬 + + // }, + // data: [{ + // name: '閲戝厓鍥涘ぇ瀹�', // 鑺傜偣1鐨勫悕绉� + // x: 1230, // 鑺傜偣1鐨剎鍧愭爣 + // y: 250, // 鑺傜偣1鐨剏鍧愭爣 + // itemStyle: { + // color: 'red', // 鑺傜偣1鐨勮儗鏅鑹� + // }, + // label: { + // color: 'black' // 鑺傜偣1鐨勫瓧浣撻鑹� + // } + // }, + // { + // name: '鍒樺畬绱�', // 鑺傜偣2鐨勫悕绉� + // x: 800, // 鑺傜偣2鐨剎鍧愭爣 + // y: 300 // 鑺傜偣2鐨剏鍧愭爣 + // }, + // { + // name: '鍌峰瘨鐩存牸', // 鑺傜偣3鐨勫悕绉� + // x: 550, // 鑺傜偣3鐨剎鍧愭爣 + // y: 360 // 鑺傜偣3鐨剏鍧愭爣 + // }, + // { + // name: '寮犱徊鏅�', // 鑺傜偣4鐨勫悕绉� + // x: 700, // 鑺傜偣4鐨剎鍧愭爣 + // y: 200 // 鑺傜偣4鐨剏鍧愭爣 + // }, + // { + // name: '涓夋秷璜�', // 鑺傜偣4鐨勫悕绉� + // x: 750, // 鑺傜偣4鐨剎鍧愭爣 + // y: 500 // 鑺傜偣4鐨剏鍧愭爣 + // }, + // ], + // links: [ // 杈圭殑杩炴帴鍏崇郴 + // { + // source: '閲戝厓鍥涘ぇ瀹�', // 杈圭殑璧峰鑺傜偣绱㈠紩涓�0锛屽嵆鑺傜偣1 + // target: '鍒樺畬绱�', // 杈圭殑缁撴潫鑺傜偣绱㈠紩涓�1锛屽嵆鑺傜偣2 + // symbolSize: [5, 20], // 杈圭殑璧峰鍜岀粨鏉熺澶村ぇ灏� + // label: { + // show: true, // 鏄惁鏄剧ず杈圭殑鏍囩 + // formatter: '鍖呭惈', + // }, + // lineStyle: { + // width: 5, // 杈圭殑瀹藉害 + // curveness: 0.2 // 杈圭殑鏇插害 + + // } + // }, + // { + // source: '鍒樺畬绱�', // 杈圭殑璧峰鑺傜偣涓�'Node 2' + // target: '鍌峰瘨鐩存牸', // 杈圭殑缁撴潫鑺傜偣涓�'Node 1' + // label: { + // show: true, // 鏄惁鏄剧ず杈圭殑鏍囩 + // formatter: '鍑虹増鐗�' + // }, + // lineStyle: { + // curveness: 0.2, // 杈圭殑鏇插害 + + // } + // }, + // { + // source: '鍒樺畬绱�', // 杈圭殑璧峰鑺傜偣涓�'Node 1' + // target: '寮犱徊鏅�', // 杈圭殑缁撴潫鑺傜偣涓�'Node 3' + // label: { + // show: true, // 鏄惁鏄剧ず杈圭殑鏍囩 + // formatter: '璇勮' + // }, + // lineStyle: { + // curveness: 0.2 // 杈圭殑鏇插害 + // } + // }, + // { + // source: '鍒樺畬绱�', // 杈圭殑璧峰鑺傜偣涓�'Node 2' + // target: '涓夋秷璜�', // 杈圭殑缁撴潫鑺傜偣涓�'Node 3' + // label: { + // show: true, // 鏄惁鏄剧ず杈圭殑鏍囩 + // formatter: '鍑虹増鐗�' + // }, + // lineStyle: { + // curveness: 0.2 // 杈圭殑鏇插害 + // } + // } + // ], + // lineStyle: { + // opacity: 0.9, // 杈圭殑閫忔槑搴� + // width: 2, // 杈圭殑瀹藉害 + // curveness: 0 // 杈圭殑鏇插害 + // }, + // textStyle: { + // fontSize: 14 // 璁剧疆鍏ㄥ眬鏂囧瓧鐨勫瓧浣撳ぇ灏� + // }, + // }] + // }; + + // option && myChart.setOption(option); // 灏嗛厤缃」搴旂敤浜庡浘琛ㄥ疄渚� + // console.log(myChart); + + var chartDom = document.getElementById('main'); + var myChart = echarts.init(chartDom); + // 鍋囪鎮ㄦ湁鑺傜偣鍚嶇О鍜屽畠浠箣闂寸殑鍏崇郴鏁版嵁 + var nodes = ['鍒樺畬绱�', '寮犱徊鏅�', '閲戝厓鍥涘ぇ瀹�', '涓夋秷璁�', '浼ゅ瘨鐩存牸']; + var relationships = [{ + source: '閲戝厓鍥涘ぇ瀹�', + target: '鍒樺畬绱�', + relation: '濮讳翰' + }, { + source: '鍒樺畬绱�', + target: '寮犱徊鏅�', + relation: '' + }, + { + source: '鍒樺畬绱�', + target: '浼ゅ瘨鐩存牸', + relation: '' + }, + { + source: '鍒樺畬绱�', + target: '涓夋秷璁�', + relation: '' + }, + // 鍏朵粬鍏崇郴... + ]; + + 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 + } + // 鏍规嵁鍏崇郴鏁版嵁鐢熸垚杩炴帴绾� + var links = []; + relationships.forEach(function(relationship) { + // console.log(relationship,'relationship'); + var sourceIndex = nodes.indexOf(relationship.source); + var targetIndex = nodes.indexOf(relationship.target); + var linkObject = { + source: sourceIndex, + target: targetIndex + }; + if (relationship.relation !== '') { + linkObject.label = { + show: true, + formatter: function(params) { + return relationship.relation; + }, + color: '#2C2C2C', + fontSize: FontSize - 2, + backgroundColor: 'rgba(255, 255, 255, 1)', + padding: [11, 20], + borderRadius:300, + position: 'middle', + z: 10, + distance: -(Distance + 1), + } + } + links.push(linkObject); + // if (sourceIndex !== -1 && targetIndex !== -1) { + // links.push({ + // source: sourceIndex, + // target: targetIndex, + // label: { + // show: true, + // formatter: function(params) { // 浣跨敤鍑芥暟鍔ㄦ�佺敓鎴愭爣绛惧唴瀹� + // // console.log(params.data, 'aaaaaaaaaaaa'); + // return relationships.find(rel => rel.source === nodes[ + // params.data + // .source] && rel.target === nodes[params + // .data.target]) + // .relation; + // }, // 璁剧疆鍏崇郴鏍囩鍐呭涓�"Child-Parent" + // color: '#2C2C2C', + // fontSize: FontSize - 2, + // backgroundColor: 'rgba(255, 255, 255, 1)', + // padding: [11, 20], + // position: 'middle', // 璁剧疆鏍囩鏂囨湰鍦ㄧ嚎鐨勪腑闂翠綅缃笂灞呬腑鏄剧ず + // // bottom: -(FontSize+10), + // z: 10, // 璁剧疆鏍囩鐨剒杞撮珮搴︼紝浣垮叾姣旇繛鎺ョ嚎鏇撮珮 + // // offset: [0, 15] ,// 寰�涓嬬Щ鍔� 10 鍍忕礌 + // distance: -(Distance + 1), // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂 + // } + // }); + // } + }); + // 鏍规嵁nodes鍔ㄦ�佺敓鎴愯妭鐐规暟鎹� + var nodeData = nodes.map(function(node, index) { + return { + name: node, + x: Math.random() * 1000, // 璁剧疆闅忔満x鍧愭爣浣嶇疆 + y: Math.random() * 600, // 璁剧疆闅忔満y鍧愭爣浣嶇疆 + itemStyle: { + color: getColorByIndex(index), // 鍙互鏍规嵁绱㈠紩璁剧疆涓嶅悓鐨勯鑹� + borderWidth: BorderWidth + 3, + borderColor: getColorByIndex(index + 1), + borderRadius: 30, + }, + symbolSize: SymbolSize + 50 + }; + }); + // 璁剧疆棰滆壊 + function getColorByIndex(index) { + var colors = ['#ecf4ff', '#dd9795', '#f1edbe', '#ecf4ff', '#c5dbd8']; // 鍙互鏍规嵁瀹為檯鎯呭喌璁剧疆棰滆壊鏁扮粍 + return colors[index % colors.length]; + } + var option; option = { - // title: { - // text: 'Basic Graph' // 鍥捐〃鏍囬涓�'Basic Graph' - // }, - tooltip: {}, // 榧犳爣鎮仠鏃舵樉绀虹殑鎻愮ず妗� - animationDurationUpdate: 1500, // 鏁版嵁鏇存柊鏃剁殑鍔ㄧ敾鏃堕暱 - animationEasingUpdate: 'quinticInOut', // 鏁版嵁鏇存柊鏃剁殑鍔ㄧ敾鏁堟灉 + backgroundColor: { + type: 'image', + image: '/static/image/characterRelationBg.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', // 鍥捐〃绫诲瀷涓�'graph' - layout: 'none', // 鍥捐〃甯冨眬鏂瑰紡涓�'none'锛屽嵆鑺傜偣浣嶇疆鐢眡鍜寉鍧愭爣鎸囧畾 - symbolSize: 50, // 鑺傜偣鐨勫ぇ灏� - roam: false, // 鏄惁寮�鍚极娓革紝鍗冲彲浠ユ嫋鍔ㄥ拰缂╂斁鍥捐〃 + type: 'graph', + layout: 'none', + symbolSize: SymbolSize, // 璋冩暣鑺傜偣澶у皬 label: { - show: true // 鏄惁鏄剧ず鑺傜偣涓婄殑鏍囩 + show: true, + color: 'black', // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹� + fontSize: FontSize, // 璁剧疆鏂囧瓧澶у皬 }, + // edgeSymbol: ['circle'], + // edgeSymbolSize: [4, 10], edgeSymbol: ['circle', 'arrow'], // 杈圭殑璧峰鍜岀粨鏉熺澶存牱寮� - edgeSymbolSize: [4, 10], // 杈圭殑璧峰鍜岀粨鏉熺澶村ぇ灏� - edgeLabel: { - fontSize: 20 // 杈圭殑鏍囩瀛椾綋澶у皬 - }, - data: [{ - name: '閲戝厓鍥涘ぇ瀹�', // 鑺傜偣1鐨勫悕绉� - x: 1230, // 鑺傜偣1鐨剎鍧愭爣 - y: 250, // 鑺傜偣1鐨剏鍧愭爣 - itemStyle: { - color: 'red' // 鑺傜偣1鐨勮儗鏅鑹� - }, - label: { - color: 'black' // 鑺傜偣1鐨勫瓧浣撻鑹� - } - }, - { - name: '鍒樺畬绱�', // 鑺傜偣2鐨勫悕绉� - x: 800, // 鑺傜偣2鐨剎鍧愭爣 - y: 300 // 鑺傜偣2鐨剏鍧愭爣 - }, - { - name: '鍌峰瘨鐩存牸', // 鑺傜偣3鐨勫悕绉� - x: 550, // 鑺傜偣3鐨剎鍧愭爣 - y: 360 // 鑺傜偣3鐨剏鍧愭爣 - }, - { - name: '寮犱徊鏅�', // 鑺傜偣4鐨勫悕绉� - x: 700, // 鑺傜偣4鐨剎鍧愭爣 - y: 200 // 鑺傜偣4鐨剏鍧愭爣 - }, - { - name: '涓夋秷璜�', // 鑺傜偣4鐨勫悕绉� - x: 750, // 鑺傜偣4鐨剎鍧愭爣 - y: 500 // 鑺傜偣4鐨剏鍧愭爣 - }, - ], - links: [ // 杈圭殑杩炴帴鍏崇郴 - { - source: '閲戝厓鍥涘ぇ瀹�', // 杈圭殑璧峰鑺傜偣绱㈠紩涓�0锛屽嵆鑺傜偣1 - target: '鍒樺畬绱�', // 杈圭殑缁撴潫鑺傜偣绱㈠紩涓�1锛屽嵆鑺傜偣2 - symbolSize: [5, 20], // 杈圭殑璧峰鍜岀粨鏉熺澶村ぇ灏� - label: { - show: true, // 鏄惁鏄剧ず杈圭殑鏍囩 - formatter: '鍖呭惈', - }, - lineStyle: { - width: 5, // 杈圭殑瀹藉害 - curveness: 0.2 // 杈圭殑鏇插害 - - } - }, - { - source: '鍒樺畬绱�', // 杈圭殑璧峰鑺傜偣涓�'Node 2' - target: '鍌峰瘨鐩存牸', // 杈圭殑缁撴潫鑺傜偣涓�'Node 1' - label: { - show: true, // 鏄惁鏄剧ず杈圭殑鏍囩 - formatter: '鍑虹増鐗�' - }, - lineStyle: { - curveness: 0.2 // 杈圭殑鏇插害 - } - }, - { - source: '鍒樺畬绱�', // 杈圭殑璧峰鑺傜偣涓�'Node 1' - target: '寮犱徊鏅�', // 杈圭殑缁撴潫鑺傜偣涓�'Node 3' - label: { - show: true, // 鏄惁鏄剧ず杈圭殑鏍囩 - formatter: '璇勮' - }, - lineStyle: { - curveness: 0.2 // 杈圭殑鏇插害 - } - }, - { - source: '鍒樺畬绱�', // 杈圭殑璧峰鑺傜偣涓�'Node 2' - target: '涓夋秷璜�', // 杈圭殑缁撴潫鑺傜偣涓�'Node 3' - label: { - show: true, // 鏄惁鏄剧ず杈圭殑鏍囩 - formatter: '鍑虹増鐗�' - }, - lineStyle: { - curveness: 0.2 // 杈圭殑鏇插害 - } - } - ], + edgeSymbolSize: [20, 20], // 杈圭殑璧峰鍜岀粨鏉熺澶村ぇ灏� + data: nodeData, + links: links, lineStyle: { - opacity: 0.9, // 杈圭殑閫忔槑搴� - width: 2, // 杈圭殑瀹藉害 - curveness: 0 // 杈圭殑鏇插害 + opacity: 0.9, + width: 2, + curveness: 0.3 } }] }; - option && myChart.setOption(option); // 灏嗛厤缃」搴旂敤浜庡浘琛ㄥ疄渚� - console.log(myChart); + // 灏嗙敓鎴愮殑杩炴帴绾挎坊鍔犲埌echarts鍥捐〃鐨刼ption涓� + option.series[0].links = links; + option && myChart.setOption(option); }) } }, @@ -206,26 +392,42 @@ } } + .Midde { - background-color: #d1d6dc; + /* background-color: #d1d6dc; */ + background-image: url(@/static/image/瀛︽淳Bg.png); + background-size: 100% 100%; color: #000; - padding: 40rpx; + padding: .18rem .23rem 0; align-items: flex-start; + height: 1.43rem; view { color: #000; } + .MiddeBack { + width: 0.6rem; + height: 0.24rem; + font-size: .12rem; + padding: 0; + + } + .Lists { li { - /* min-width: 50rpx; */ - border-radius: 40rpx; - background-color: #fff; - padding: 0 10rpx; - font-size: 18rpx; - margin: 0 20rpx; + width: 0.96rem; + height: .3rem; + border: 1px solid #597AA5; + line-height: .3rem; + text-align: center; + font-size: .14rem; } } } + + .school1 { + margin: 0 .2rem; + } </style> \ No newline at end of file diff --git a/pages/Login/Login.vue b/pages/Login/Login.vue index 3ad6d66..9bb59bc 100644 --- a/pages/Login/Login.vue +++ b/pages/Login/Login.vue @@ -24,12 +24,12 @@ <el-input v-model="loginData.loginID"></el-input> </el-form-item> <el-form-item label="鐧诲綍瀵嗙爜" prop="pass"> - <el-input v-model="loginData.pass"></el-input> + <el-input type="password" v-model="loginData.pass"></el-input> </el-form-item> <el-form-item class="btn"> <el-button class="font-family" style="margin-top: .47rem; font-weight:900;font-size: .3rem; width: 100%;background-color:#244A7B;color: #fff;padding: .16rem;" - size="medium" @click="Login('formLogin1')">鐧诲綍</el-button> + size="medium" @click="Login('formLogin1')">娉ㄥ唽</el-button> </el-form-item> <view class="" style="display: flex;font-size: .14rem;color: #244A7B;"> <view class="" style="display: inline-block;cursor: pointer;" @click="forgetPass">蹇樿瀵嗙爜 @@ -328,22 +328,78 @@ </script> <style scoped> - @media screen and (min-width: 1441px) { + @media screen and (max-width:1366px) { ::v-deep .el-card { - top: 60% !important; + top: 50% !important; } - + ::v-deep .el-input__inner{ + height: .44rem; + } + ::v-deep .el-card { + padding: .2rem 0 !important; + } + ::v-deep .el-form-item__error { + font-size: .13rem !important; + } + + .LoginBg{ + margin: 0 !important; + } + .hua{ + height: 5rem !important; + } + } + @media screen and (min-width:1366px) and (max-width:1920px) { + ::v-deep .el-card__body{ + padding: 0 .58rem !important; + } + ::v-deep .el-card { + top: 80% !important; + } + ::v-deep .el-input__inner{ + height: .44rem; + } + ::v-deep .el-card { + padding: .25rem 0 !important; + } + .LoginBg{ + margin: 0 !important; + } + .hua{ + height: 5rem !important; + } + } + ::v-deep .el-form-item__error { + font-size: .13rem !important; + } + @media screen and (min-width: 1920px) and (max-width:2560px){ + ::v-deep .el-card { + top: 80% !important; + } + ::v-deep .el-card { + padding: .25rem .4rem !important; + } + ::v-deep .el-card__body { + /* top: 90% !important; */ + padding: 0 !important; + } + ::v-deep .el-input__inner{ + height: .44rem; + } +::v-deep .el-form-item__error { + font-size: .13rem; + } .BottomColumn { padding: .10rem 0; } - .LoginTop { + /* .LoginTop { margin-bottom: .17rem !important; - } + } */ .btn ::v-deep .el-button { - margin-top: 0.1rem !important; - font-size: 0.2rem !important; + margin-top: 0.3rem !important; + /* font-size: 0.2rem !important; */ width: 100%; padding: 0.12rem !important; } @@ -364,7 +420,42 @@ height: 2.5rem !important; } } - + @media screen and (min-width:2560px)and (max-width:3840px) { + .LoginBg{ + margin: 0 !important; + } + ::v-deep .el-card { + top: 85% !important; + } + ::v-deep .el-input__inner{ + height: .4rem !important; + font-size: .14rem; + } + ::v-deep .el-input__inner{ + height: .44rem; + } + .hua { + height: 4rem !important; + } + + } +/* 灏忎簬 */ + @media screen and (max-width:2560px) { + /* ::v-deep .el-input__inner{ + height: .44rem; + } + ::v-deep .el-card { + padding: .25rem .58rem !important; + } + ::v-deep .el-card__body { + top: 90% !important; + padding: 0 !important; + } + .hua{ + height: 5rem !important; + } + */ + } .LoginBg { @@ -392,15 +483,12 @@ margin-left: 0 !important; } - /* ::v-deep .el-form-item__label { - - - } */ ::v-deep .el-input__inner { border: none; border-bottom: 1px solid #2d476a; border-radius: 0; + } ::v-deep .el-form-item__error { @@ -415,7 +503,6 @@ border-color: #2d476a !important; } - ::v-deep .el-form-item__label {} ::v-deep .el-form-item__label { padding: 0; @@ -425,7 +512,7 @@ } ::v-deep .el-form-item { - margin-bottom: .22rem; + margin-bottom: .25rem; } .ss1 { diff --git a/pages/Register/Register.vue b/pages/Register/Register.vue index c84bad3..77e5d40 100644 --- a/pages/Register/Register.vue +++ b/pages/Register/Register.vue @@ -39,7 +39,7 @@ <el-form-item label="楠岃瘉鐮�" prop="verifyCode"> <view class="verifyCode relative"> <el-input v-model="registerData.verifyCode" placeholder="璇疯緭鍏ラ獙璇佺爜"></el-input> - <view @click="verifyCodeClick" class="" + <view @click="verifyCodeClick" class="yzm" style="position: absolute;right: 0%;top: 0%;color: #244A7B;font-size: .14rem;font-weight: 500;"> 鑾峰彇楠岃瘉鐮�</view> </view> @@ -49,7 +49,7 @@ style="margin-top: .22rem; font-weight:900;font-size: .3rem; width: 100%;background-color:#244A7B;color: #fff;padding: .16rem;" size="medium" @click="Login('formLogin')">娉ㄥ唽</el-button> </el-form-item> - <view class="" + <view class="asdf" style="font-size: .12rem;color: #9E9E9E;font-weight: 500; text-align: center;line-height: normal;margin-bottom: .19rem;"> 鐢ㄦ埛娉ㄥ唽鍗充唬琛ㄥ悓鎰忋�婃湇鍔℃潯娆俱�嬪拰銆婄敤鎴烽殣绉佷繚鎶ゅ拰涓汉淇℃伅鏉℃銆�</view> </el-form> @@ -308,9 +308,175 @@ } </script> <style scoped> - @media screen and (min-width: 1366px){ + @media screen and (max-width:1366px) { + ::v-deep .el-card { + top: 50% !important; + } + + ::v-deep .el-input__inner { + height: .44rem; + } + + ::v-deep .el-card { + padding: .2rem 0 !important; + } + + .LoginBg { + margin: 0 !important; + } + + .hua { + height: 5rem !important; + } + } + + @media screen and (min-width:1366px) and (max-width:1920px) { + ::v-deep .el-card__body { + padding: 0 .58rem !important; + } + + ::v-deep .el-card { + top: 80% !important; + } + + ::v-deep .el-input__inner { + height: .44rem; + } + + ::v-deep .el-card { + padding: .25rem 0 !important; + } + + .LoginBg { + margin: 0 !important; + } + + .hua { + height: 5rem !important; + } + } + + @media screen and (min-width: 1920px) and (max-width:2560px) { + ::v-deep .el-card { + top: 80% !important; + } + + ::v-deep .el-card { + padding: .25rem .4rem !important; + } + + ::v-deep .el-card__body { + /* top: 90% !important; */ + padding: 0 !important; + } + + ::v-deep .el-input__inner { + height: .44rem; + } + + ::v-deep .el-form-item__error { + font-size: .13rem; + } + + .BottomColumn { + padding: .10rem 0; + } + + /* .LoginTop { + margin-bottom: .17rem !important; + } */ + + .btn ::v-deep .el-button { + margin-top: 0.3rem !important; + /* font-size: 0.2rem !important; */ + width: 100%; + padding: 0.12rem !important; + } + + .LoginBg { + height: .3rem !important; + } + + .hua { + height: 4rem !important; + } + + .fff { + height: 3.5rem !important; + } + + .rrr { + height: 2.5rem !important; + } + } + + @media screen and (min-width:2560px)and (max-width:3840px) { + .LoginBg { + margin: 0 !important; + height: .3rem !important; + } + + ::v-deep .el-card { + top: 70% !important; + padding: 0 !important; + } + + ::v-deep .el-card__body { + padding: .25rem .5rem !important; + } + + ::v-deep .el-form { + padding-left: .1rem !important; + } + + ::v-deep .el-form-item__error { + font-size: .13rem !important; + } + + ::v-deep .el-input__inner { + height: .35rem !important; + } + + .hua { + height: 4rem !important; + } + + .LoginTop { + margin-bottom: .25rem !important; + } + + .yzm { + top: 15% !important; + } + + .fff { + width: 2.4rem !important; + height: 4rem !important; + } + + .rrr { + width: 2rem !important; + } + + .btn ::v-deep .el-button { + margin-top: 0.2rem !important; + /* font-size: 0.2rem !important; + width: 100%; + padding: 0.12rem !important; */ + } + + .asdf { + margin-bottom: .1rem !important; + } + + } + + /* @media screen and (max-width: 1366px){ ::v-deep .el-card{ top: 60% !important; + } + .LoginTop{ + margin-bottom: .2rem !important; } } @media screen and (min-width: 1920px){ @@ -318,9 +484,11 @@ top: 80% !important; } - }/* + + } */ + /* 鍦ㄥ睆骞曞搴﹁秴杩� 1440px 鏃剁殑鏍峰紡璁剧疆 */ - @media screen and (min-width: 1441px) { + /* @media screen and (min-width: 1441px) { ::v-deep .el-card { top: 80% !important; } @@ -346,14 +514,15 @@ }.rrr{ height: 2.5rem !important; } - } - + } */ + .LoginBg { width: 1.2rem; height: .37rem; background: url(@/static/image/鐢ㄦ埛娉ㄥ唽.png) no-repeat 0 0; background-size: 100% 100%; + /* border: 10px solid red; */ } @@ -412,8 +581,8 @@ font-weight: 500; margin-right: .29rem; display: flex; - align-items: center; - text-align: right; + align-items: center; + text-align: right; } ::v-deep .el-form-item { diff --git a/pages/TcmSystem/TcmSystem.vue b/pages/TcmSystem/TcmSystem.vue index cad04c4..7692e83 100644 --- a/pages/TcmSystem/TcmSystem.vue +++ b/pages/TcmSystem/TcmSystem.vue @@ -1,144 +1,122 @@ <template> <view> - <view class="NavTop flex"> - <view class=""><img src="../../static/涓尰浜虹墿鐭ヨ瘑搴�0201/涓夋潯鏉�.png" alt="" /></view> - <view class="">涓尰鍖讳簨鍒跺害</view> - <view class="NavTopr"> - <img src="../../static/涓尰浜虹墿鐭ヨ瘑搴�0201/涓夋潯鏉�.png" alt="" /> - <img src="../../static/涓尰浜虹墿鐭ヨ瘑搴�0201/涓夋潯鏉�.png" alt="" /> - <img src="../../static/涓尰浜虹墿鐭ヨ瘑搴�0201/涓夋潯鏉�.png" alt="" /> - </view> - </view> - <view class="mImage"> - <img src="https://img0.baidu.com/it/u=3838093562,4126749835&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1710522000&t=a986064700deada5ec74d05e02abd8b5" - alt="" /> - </view> - <view class="flex flex-center" style="flex-direction: column;"> - <view class="search"> - <next-search-more :selectValue="selectValue"> + <headNav :idIndex="idIndex" text="涓尰鍖讳簨鍒跺害"/> + <view class="flex flex-center sousuo" style="flex-direction: column;"> + <view class="search1"> + <next-search-more @search="onSearch" placeholder="鎼滅储鑱屽畼/鏈烘瀯" :selectValue="selectValue"> </next-search-more> </view> - <view class="flex"> + <view class="flex remen"> 鐑棬鎼滅储锛� <ul class="flex" style="margin-right: 10rpx;"> - <li v-for="item in hot" :key="item.id" @tap="HotClick(item.id)" style="margin: 0 10rpx;" - :style="{color:item.bgColor==true?'#5879a4':'#000'}"> + <li v-for="item in hot" :key="item.id" @tap="HotClick(item.id)" style="margin: 0 .05rem;color: #244A7B;"> {{item.name}} </li> </ul> </view> </view> <view class="centre flex"> - <view class="CLeft flex"> - <ul class="institution"> - <view class="" style="font-weight: 700;padding-bottom: 6rpx;">鏈烘瀯缁熻10</view> - <li v-for="ietm1 in 7" :key="item1" class="flex"> - <view class="">item</view> - <view class="">112</view> - </li> - </ul> - <ul class="institution institution2"> - <view class="" style="font-weight: 700;padding-bottom: 6rpx;">鏈烘瀯缁熻10</view> - <li v-for="ietm1 in 4" :key="item1" class="flex"> - <view class="">item</view> - <view class="">112</view> - </li> - </ul> - <ul class="institution institution3 "> - <view class="" style="font-weight: 700;padding-bottom: 6rpx;">鏈烘瀯缁熻10</view> - <li v-for="ietm1 in 1 " :key="item1" class="flex"> - <view class="">item</view> - <view class="">112</view> - </li> - </ul> - </view> - <view class="CRight flex flex-column relative"> - <el-row style="height: 50rpx;width: 100%;"> - <view class="flex"> - <view class="">鍏眥{total}}鏉�</view> - <view class=""> - <uni-data-select style="width: 250rpx;" v-model="rankVal" :localdata="rank" :clear="false" - @change="selectChange"> - </uni-data-select> + <!-- 宸� --> + <view class="CLeft flex fbox"> + <!-- 鑱屼笟 --> + <view class="demo-uni-col MargB box boox" :class="{ 'a': activeBox === 'a'?'a':'' }" + style="background-color: #fff; border: 2rpx solid #e0e0e0;"> + <h3>{{institution.title}} ({{institution.list.length}}) </h3> + <ul style="margin-top: 10rpx;"> + <!-- background-color: #d6e3f4;border-radius: 60rpx; --> + <li class="flex" + :style="{'background':institution.index === index ? '#DDE8F6' :'','borderRadius': institution.index === index ? '60rpx' :''}" + v-for="(item,index) in institution.list" style="padding:0 20rpx;color: #2C2C2C;"> + <view class="">{{item.name}}</view> + <view class="">{{item.number}}</view> + </li> + </ul> + <view class="flex flex-center toggleButton1"> + <view class="toggleButton" style="color: #244A7B;" @click="shrinkClick('a')"> + {{ activeBox !== 'a' ? '鏇村 锕�' : '鏀惰捣 锔�' }} </view> </view> - </el-row> - <view style="flex-grow: 1;" class="flex CommodityList"> - <view class="" v-for="item in CommodityList" :key="item" style="height:28% ;"> + </view> + <!-- 鑱屽畼缁熻锛�10锛� --> + <view class="demo-uni-col MargB dark box boox" :class="{ 'b': activeBox === 'b'?'b':'' }" + style="background-color: #fff; border: 2rpx solid #e0e0e0;"> + <h3>{{officials.title}} ({{officials.list.length}}) </h3> + <ul style="margin-top: 10rpx;"> + <!-- background-color: #d6e3f4;border-radius: 60rpx; --> + <li class="flex" + :style="{'background':officials.index === index ? '#DDE8F6' :'','borderRadius': officials.index == index ? '10rem' :''}" + v-for="(item,index) in officials.list" :key="index" style="padding:0 20rpx;"> + <view class="">{{item.name}}</view> + <view class="">{{item.number}}</view> + </li> + </ul> + <view class="flex flex-center toggleButton1"> + <view class="toggleButton" style="color: #244A7B;" @click="shrinkClick('b')"> + {{ activeBox !== 'b' ? '鏇村 锕�' : '鏀惰捣 锔�' }} + </view> + </view> + </view> + <!-- 鏉ユ簮锛�5锛� --> + <view class="demo-uni-col dark box boox" style="background-color: #fff; border: 2rpx solid #e0e0e0;"> + <h3>{{source.title}} ({{source.list.length}}) </h3> + <ul style="margin-top: 10rpx;"> + <!-- background-color: #d6e3f4;border-radius: 60rpx; --> + <li class="flex" v-for="(item,index) in source.list" style="padding:0 20rpx;color: #244A7B;"> + <view class="">{{index+1}}.{{item.name}}</view> + <!-- <view class="">{{item.number}}</view> --> + </li> + </ul> + </view> + </view> + <!-- 鍙� --> + <view class="CRight fbox1 flex flex-column relative"> + <!-- <el-row style="height: 50rpx;width: 100%;"> --> + <view class="flex" style="width: 100%;margin-bottom: .3rem;"> + <view class="" style="font-size: .14rem;color: #2C2C2C;font-weight: 400;">鍏眥{total}}鏉�</view> + <view class="paixu"> + <el-select v-model="rankVal" placeholder="鎸夋彁鍚嶆帓搴�"> + <el-option v-for="(item,index) in rank" :key="item" :label="item.text" + :value="item.value"></el-option> + <!-- <el-option label="鍖哄煙浜�" value="beijing"></el-option> --> + </el-select> + </view> + </view> + <!-- </el-row> flex-grow: 1;--> + <view style="" class="flex CommodityList"> + <view class="rightList" @click="ListClick" v-for="item in CommodityList" :key="item"> <el-card class="box-card" style="height: 100%;"> - <view class="flex flex-start"> - <view class="" - style="background-color: #5879a4;text-align: right;transform:translateX(-50rpx);color: #fff;padding:0 10rpx 0 50rpx;"> + <view class="flex flex-start RightListTop"> + <view class="Topzhiwei" + style="background-color: #5879a4;text-align: right;;color: #fff;" + :style="{background:item.color}"> {{item.post}} </view> - <view class="" style="margin-right: 20rpx;">{{item.name}}</view> - <view class="" + <view class="TopName">{{item.name}}</view> + <view class="TopDynasty" style="border: 1px solid #d4d4d4;font-weight:500;padding: 0 10rpx;border-radius: 10rpx;"> {{item.dynasty}} </view> </view> - <view class="" - style="background-color: #f6f6f6;padding: 5rpx 10rpx;color: #777777; margin: 15rpx 0;"> - {{item.anotherNamer}} - </view> - <view class="" - style="font-weight: 600; font-size: 20rpx;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;"> - {{item.content}} + <view class="desBox" style="padding: .14rem .2rem .23rem;"> + <view class="biecheng"> + <view class="flex" title="sdfsdf"> 鍒О锛� + <view class="BeyondHiding1" style="width: .75rem;line-height: 1;">涓�</view> + </view> + <view class="flex " style="">鏉ユ簮: + <view class="BeyondHiding1" style="margin-left: .1rem;line-height: 1"> + 涓尰鍖讳簨澶у叏 + </view> + </view> + </view> + <view class="describe font-family BeyondHiding2"> + {{item.content}} + </view> </view> </el-card> </view> </view> - <!-- 寮瑰嚭灞� --> - <el-dialog title="" class="dialog" :visible.sync="dialogVisible" width="40%"> - <!-- 鍙栨秷閿� --> - <view class="" @click="dialogVisible=false" - style="padding: 20rpx;position: absolute;left: 0;top: 0;font-size: 40rpx;z-index: 999;">X</view> - <view class="flex" style="height: 100%;flex-direction: column;"> - <view class="detailImage" style="position: relative;"> - <img style="opacity: .5;" src="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1710608400&t=42d653b0f525a8de1d45825ea8b45f66" - alt="" /> - <view class=" flex flex-column " style="height: 100%;justify-content: center; position: relative;z-index: 999;"> - <view class="" style="font-size: 40rpx;font-weight: 900;">寰″尰</view> - <view class="" style="font-size: 20rpx;font-weight: 800; border: 2rpx solid #000;margin: 30rpx 0;background-color: #fff;border-radius: 10rpx;padding: 0 10rpx;">寰″尰</view> - <ul class="flex"> - <li v-for="item in 3" style="background-color: #fff;color: #415c7a; border: 2rpx solid #415c7a;border-radius: 30rpx;padding: 0 15rpx;margin-right: 10rpx;" >ssdf</li> - </ul> - </view> - </view> - <view class="" style="width: 80%; height: 100%;position: relative;"> - <view class=" flex flex-content" - style=" box-shadow: 4px 4px 8px #888; background-color: #fff; width: 100%;left: 0; position: relative;top: -50rpx;padding: 30rpx 0; "> - <view class="">鍝佺骇: <span>浜屽搧</span> </view> - <view class="">鍝佺骇: <span>浜屽搧</span> </view> - <view class="">鍝佺骇: <span>浜屽搧</span> </view> - </view> - <view class="" style="background-color: #f4f4f4;font-weight: 700;padding: 10rpx;"> - 鐩稿叧鎻忚堪 - </view> - <view class="" style="font-size: 23rpx;font-weight: 600;margin: 30rpx 0;">鎸夋懇鍗氬+鏄彜浠eお鍖荤讲鑱岀О锛岃礋璐f帉绠℃寜鎽╂楠ㄤ笓涓氱殑鏁欐巿鑰冩牳锛屽畼闃跺湪浠庝節鍝佷笅[1]銆傛寜鎽╁崥澹紝闅嬩唬璁句簩浜猴紝鍝佷綅涓嶈銆傚攼浠h涓�浜猴紝瀹橀樁涓轰粠涔濆搧涓嬶紝鎸夋懇鍗氬+璐熻矗鎺岀鎸夋懇銆佹楠ㄤ笓涓氱殑鏁欏锛屼笅璁炬寜鎽╁笀銆佹寜鎽╁伐绛変綔涓哄姪鎵嬨��</view> - <view class="" style="background-color: #f4f4f4;font-weight: 700;padding: 10rpx;"> - 鐩稿叧鎻忚堪 - </view> - <view class="" style="font-size: 23rpx;font-weight: 600;margin: 30rpx 0;">鎸夋懇鍗氬+鏄彜浠eお鍖荤讲鑱岀О锛岃礋璐f帉绠℃寜鎽╂楠ㄤ笓涓氱殑鏁欐巿鑰冩牳锛屽畼闃跺湪浠庝節鍝佷笅[1]銆傛寜鎽╁崥澹紝闅嬩唬璁句簩浜猴紝鍝佷綅涓嶈銆傚攼浠h涓�浜猴紝瀹橀樁涓轰粠涔濆搧涓嬶紝鎸夋懇鍗氬+璐熻矗鎺岀鎸夋懇銆佹楠ㄤ笓涓氱殑鏁欏锛屼笅璁炬寜鎽╁笀銆佹寜鎽╁伐绛変綔涓哄姪鎵嬨��</view> - </view> - <view class="flex" style="padding: 20rpx; box-sizing: border-box; width: 100%;margin-bottom: 2rpx;"> - <el-button class="flex"> - <view class="flex"> - <view class="" style="margin-right: 40rpx;">涓婁竴鏉�</view> - <view class="">鏈烘瀯: 澶尰闄� </view> - </view> - </el-button> - <el-button class="flex"> - <view class="flex"> - <view class="" style="margin-right: 40rpx;">鏈烘瀯: 澶尰闄� </view> - <view class="" >涓嬩竴鏉�</view> - </view> - </el-button> - </view> - </view> - </el-dialog> <!-- 鍒嗛〉 --> - <el-row style="height: 50rpx;position: absolute;bottom: 50rpx;"> + <el-row class="fenye" style="position: absolute;bottom: .1rem;"> <el-pagination class="paging" :current-page="CurrentPage" :total="total" :page-size="6" @current-change="CurrentChange" @prev-click="PrevClick" @next-click="NextClick" prev-text="涓婁竴椤�" next-text="涓嬩竴椤�" background layout="prev, pager, next"> @@ -147,21 +125,158 @@ </el-row> </view> </view> + <!-- 寮瑰嚭灞� --> + <el-dialog title="" class="dialog" :visible.sync="dialogVisible" width="40%"> + <!-- 鍙栨秷閿� --> + <view class="" + style="padding: .16rem;position: absolute;z-index: 9999999999999999999999999999999999999999; left: 0;top: 0;"> + <img @click="dialogVisible=false" src="@/static/image/X.png" alt="" style="width: 100%;height: 100%;" + sizes="" srcset="" /> + </view> + <view class="flex" style="position: relative; height: 100%;flex-direction: column;"> + <view class="detailImage" style="position: relative;"> + <img src="@/static/image/personageBg.png" alt="" /> + <view class=" flex flex-column " + style="height: 100%;justify-content: flex-start; position: relative;z-index: 999;"> + <view class="creatureXinxi1">寰″尰</view> + <view class="creatureXinxi2"> + 鍞愭湞</view> + <ul class="flex creatureXinxi3"> + <li v-for="item in 4">JSF</li> + </ul> + </view> + </view> + <view class="" style="width: 80%; height: 100%;position: relative;"> + <view class="pinji flex "> + <view class="">鍝佺骇: <span> 浜屽搧</span> </view> + <view class="">鍒悕: <span> 浜�</span> </view> + <view class="">鏉ユ簮: <span> 涓浗鍘嗕唬鍖诲杈炲吀</span> </view> + </view> + <view class=""> + <view class="" + style="font-size: .14rem;color: #2C2C2C; background-color: #F0F0F0;font-weight: 700;padding-left: .18rem;height: .34rem;line-height: .34rem;"> + 鐩稿叧鎻忚堪 + </view> + <view class="" style="font-size: .1rem;color: #2C2C2C;margin: .1rem 0 .19rem;line-height: 2.3;"> + 鎸夋懇鍗氬+鏄彜浠eお鍖荤讲鑱岀О锛岃礋璐f帉绠℃寜鎽╂楠ㄤ笓涓氱殑鏁欐巿鑰冩牳锛屽畼闃跺湪浠庝節鍝佷笅[1]銆傛寜鎽╁崥澹紝闅嬩唬璁句簩浜猴紝鍝佷綅涓嶈銆傚攼浠h涓�浜猴紝瀹橀樁涓轰粠涔濆搧涓嬶紝鎸夋懇鍗氬+璐熻矗鎺岀鎸夋懇銆佹楠ㄤ笓涓氱殑鏁欏锛屼笅璁炬寜鎽╁笀銆佹寜鎽╁伐绛変綔涓哄姪鎵嬨�� + </view> + <view class="" + style="font-size: .14rem;color: #2C2C2C; background-color: #F0F0F0;font-weight: 700;padding-left: .18rem;height: .34rem;line-height: .34rem;"> + 澶囨敞 + </view> + <view class="" style="font-size: .1rem;color: #2C2C2C;margin: .1rem 0 .19rem;line-height: 2.3;"> + 鎸夋懇鍗氬+鏄彜浠eお鍖荤讲鑱岀О锛岃礋璐f帉绠℃寜鎽╂楠ㄤ笓涓氱殑鏁欐巿鑰冩牳锛屽畼闃跺湪浠庝節鍝佷笅銆� + </view> + </view> + </view> + <view class="flex detailsBtn"> + <el-button class="flex btn-prev"> + <view class="flex"> + <view class="" style="margin-right: 40rpx;">涓婁竴鏉�</view> + <view class="btn-prev-L">鏈烘瀯: 澶尰闄� </view> + </view> + </el-button> + <view class=""> + 102/329 + </view> + <el-button class="flex btn-next"> + <view class="flex"> + <view class="" style="margin-right: 40rpx;">鏈烘瀯: 澶尰闄� </view> + <view class="btn-prev-R">涓嬩竴鏉�</view> + </view> + </el-button> + </view> + </view> + </el-dialog> - + <Footer1 :isLocation="false" :isMarginTop="0.5"/> </view> </template> <script> + import Footer1 from '@/components/footer/footer.vue' export default { + components: { + Footer1 + }, data() { return { + + // 鏈烘瀯缁熻 + institution: { + title: '鏈烘瀯缁熻', + index: 0, + list: [{ + name: '鍏ㄩ儴', + id: 1, + number: 829 + }, + { + name: '鍖诲', + id: 2, + number: 90 + }, { + name: '涓栧尰', + id: 3, + number: 81 + }, { + name: '瀹环鍖�', + id: 4, + number: 83 + }, + ] + }, + // 鑱屽畼缁熻 + officials: { + title: '鑱屽畼缁熻', + index: 0, + list: [{ + name: '鍏ㄩ儴', + id: 1, + number: 829 + }, + { + name: '鍖诲', + id: 2, + number: 90 + }, { + name: '涓栧尰', + id: 3, + number: 81 + }, { + name: '瀹环鍖�', + id: 4, + number: 83 + }, + ] + }, + // 鏉ユ簮 + source: { + title: '鏉ユ簮', + index: 0, + list: [{ + name: '涓浗鍖讳簨鍒跺害杈炲吀', + id: 1, + }, + { + name: '涓尰鍖讳簨澶у叏', + id: 2, + }, { + name: '涓浗鍖讳簨鍒跺害鐮旂┒', + id: 3, + } + ] + }, + // 灞曞紑鍜屾敹缂╃殑鎸夐挳闇�瑕� + activeBox: null, + // 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ + idIndex: 0, // 寮瑰嚭灞� - dialogVisible: true, + dialogVisible: false, // 鎼滅储鐨勪笅鎷夊垪琛� selectValue: [{ value: 0, - text: '鏄惁' + text: '鍖讳簨鍒跺害' }, { value: 1, text: '11sd1' @@ -169,6 +284,7 @@ value: 2, text: '11sdsd1' }], + // 鐑棬鎼滅储 hot: [{ id: 1, @@ -188,7 +304,7 @@ // 鎺掑簭涓嬫媺鑿滃崟 rank: [{ value: 0, - text: '鎺掑簭' + text: '鎸夋彁鍚嶆帓搴�' }, { value: 1, text: '鎺掑簭s' @@ -199,14 +315,25 @@ id: 1, post: '鏈烘瀯', name: '澶尰闄�', + color: '#597AA5', dynasty: '鍞愭湞', anotherNamer: '鍒О----------', - content: '鍐呭++++++++++++++++++++++++++++++' + content: '鍙や唬鍖荤枟鏈烘瀯鍚嶇О锛屽お鍖婚櫌鍚嶇О濮嬩簬閲戜唬锛屾壙琚簬鍞愬畫鐨勫お鍖荤讲銆佸お鍖诲眬锛屼互鍚庡巻浠e潎绔嬫湁澶尰闄㈡満鏋勫巻浠e潎绔嬫湁澶尰闄㈡満鏋�' }, { id: 2, + post: '鑱屽畼', + name: '澶尰闄�', + dynasty: '鍞愭湞', + color: '#DA7A2B', + anotherNamer: '鍒О----------', + content: '鍙や唬鍖荤枟鏈烘瀯鍚嶇О锛屽お鍖婚櫌鍚嶇О濮嬩簬閲戜唬锛屽彜浠e尰鐤楁満鏋勫悕绉帮紝澶尰闄㈠悕绉板浜庨噾浠o紝鍙や唬鍖荤枟鏈烘瀯鍚嶇О锛屽お鍖婚櫌鍚嶇О濮嬩簬閲戜唬锛屽彜浠e尰鐤楁満鏋勫悕绉帮紝澶尰闄㈠悕绉板浜庨噾浠o紝鍙や唬鍖荤枟鏈烘瀯鍚嶇О锛屽お鍖婚櫌鍚嶇О濮嬩簬閲戜唬锛�' + }, + { + id: 3, post: '鏈烘瀯', name: '澶尰闄�', + color: '#597AA5', dynasty: '鍞愭湞', anotherNamer: '鍒О----------', content: '鍐呭++++++++++++++++++++++++++++++' @@ -215,6 +342,25 @@ id: 3, post: '鏈烘瀯', name: '澶尰闄�', + color: '#597AA5', + dynasty: '鍞愭湞', + anotherNamer: '鍒О----------', + content: '鍐呭++++++++++++++++++++++++++++++' + }, + { + id: 3, + post: '鏈烘瀯', + name: '澶尰闄�', + color: '#597AA5', + dynasty: '鍞愭湞', + anotherNamer: '鍒О----------', + content: '鍐呭++++++++++++++++++++++++++++++' + }, + { + id: 3, + post: '鏈烘瀯', + name: '澶尰闄�', + color: '#597AA5', dynasty: '鍞愭湞', anotherNamer: '鍒О----------', content: '鍐呭++++++++++++++++++++++++++++++' @@ -227,7 +373,35 @@ } }, + mounted() { + // 淇敼涓ゆ鐨勯珮搴︿繚鎸佷竴鑷� + var box1Height = document.querySelector('.fbox').offsetHeight; + console.log(box1Height, 'box1Height'); + document.querySelector('.fbox1').style.height = box1Height + 'px'; + }, + onLoad(options) { + this.idIndex = options.id + console.log('optionsoptionsoptions', options.id); + }, methods: { + // 灞曞紑鏀剁缉 + shrinkClick(box) { + console.log(box); + if (this.activeBox === box) { + console.log('sdfs'); + this.activeBox = null; + } else { + this.activeBox = box; + } + }, + // list鏁扮粍 + ListClick() { + this.dialogVisible = !this.dialogVisible + }, + // 鎼滅储鎸夐挳 + onSearch(val) { + console.log(val); + }, // 鐑棬鎼滅储 HotClick(id) { this.hot.forEach(item => { @@ -275,7 +449,104 @@ } </script> -<style> +<style scoped> + + @media screen and (min-width:2560px)and (max-width:3840px) { + + ::v-deep .search { + height: .36rem; + border-radius: .5rem !important; + align-items: center; + border-color: #597AA5 !important; + } + } + @media screen and (min-width:1366px) and (max-width:1920px){ + ::v-deep .search { + height: .36rem; + border-radius: .5rem !important; + align-items: center; + border-color: #597AA5 !important; + } + } + + /* 涓汉淇℃伅 */ + .creatureXinxi1 { + font-size: .24rem; + font-weight: 700; + line-height: 1; + margin-top: .29rem; + } + + .creatureXinxi2 { + /* width: .24rem; */ + height: .17rem; + line-height: 1; + font-size: .12rem; + font-weight: 600; + background-color: #fff; + padding: .02rem .04rem; + margin: .15rem 0; + color: #2C2C2C; + border: 1px solid #2C2C2C; + border-radius: 2px; + } + + .creatureXinxi3 li { + height: .16rem; + line-height: .16rem; + background-color: #fff; + padding: 0 .08rem; + margin: 0 .07rem; + font-size: .12rem; + color: #2C2C2C; + border: 1px solid #2C2C2C; + border-radius: .3rem; + } + + /* --------- */ + /* 鍝佺骇 */ + .pinji { + box-shadow: 2px 0px 3px #888; + background-color: #fff; + width: 100%; + /* height: .6rem; + line-height: .6rem; */ + font-size: .14rem; + padding: .19rem .28rem .21rem; + left: 0; + position: relative; + top: -.25rem; + color: #2C2C2C; + } + + /* 涓汉淇℃伅鐨勬寜閽� */ + .detailsBtn { + padding: .2rem; + width: 100%; + margin-bottom: 2rpx; + position: absolute; + bottom: 0; + } + + .detailsBtn .btn-prev, + .detailsBtn .btn-next { + font-size: .14rem; + /* padding: .14rem .1rem; */ + border: 1px solid #9E9E9E; + border-radius: 5px; + /* height: .32rem; */ + line-height: .32rem; + } + .detailsBtn .btn-prev-L,.detailsBtn .btn-prev-R{ + border-left: 1px solid #9E9E9E; + padding-left: .1rem; + } + .detailsBtn>:nth-child(2) { + font-size: .14rem; + color: #2C2C2C; + } + + /* ------ */ img { width: 100%; height: 100%; @@ -308,24 +579,28 @@ } } - .search { - width: 50%; - } + .centre { - padding: 0 30rpx; + padding-left: 1.23rem; + padding-right: 1.17rem; /* border: 1px solid #000; */ - height: 70vh; + /* height: 70vh; */ /* overflow: hidden; */ align-items: flex-start; + position: relative; + z-index: 1; .CLeft { + width: 2.6rem; height: 100%; vertical-align: top; flex-direction: column; + justify-content: flex-start; + margin-right: .2rem; .institution { - width: 300rpx; + width: 100%; border: 1px solid #000; padding: 20rpx; @@ -341,13 +616,16 @@ } .CRight { - margin-left: 20rpx; + /* margin-left: 20rpx; */ + width: 100%; height: 100%; flex-grow: 1; - border: 1px solid #000; + border: 1px solid #c1d3ea; box-sizing: border-box; overflow: hidden; padding: 10rpx 30rpx; + padding: .1rem .2rem; + background-color: #fff; } } @@ -359,7 +637,7 @@ align-items: flex-start; flex-wrap: wrap; align-content: flex-start; - padding: 20rpx 20rpx 0 20rpx; + /* padding: 20rpx 20rpx 0 20rpx; */ justify-content: space-between; >view { @@ -375,15 +653,46 @@ /* ::v-deep .el-card__body{ padding: 30rpx; } */ + /* 鍒嗛〉 */ .paging { display: flex; align-items: center; } + .paging ::v-deep .btn-prev, + .paging ::v-deep .btn-next { + border: 0; + } + + .paging ::v-deep .btn-prev span, + .paging ::v-deep .btn-next span { + font-size: .12rem; + height: .3rem; + line-height: .3rem; + background-color: #fff; + color: #9E9E9E; + text-align: center; + border: 1px solid #9E9E9E; + padding: 0 .1rem; + } + + .paging ::v-deep .el-pager li { + font-size: .12rem; + width: .28rem; + height: .3rem; + line-height: .3rem; + background-color: #fff; + color: #9E9E9E; + text-align: center; + border: 1px solid #9E9E9E; + } + + /* ------------ */ .dialog { position: fixed; right: 0; top: 0; + z-index: 9999999999999999999999999999999999999999999 !important; >div { height: 100%; @@ -409,13 +718,257 @@ .detailImage { width: 100%; - height: 450rpx; + height: 1.94rem; color: #000; - img{ + + img { position: absolute; width: 100%; height: 100%; vertical-align: top; } } + + + /* 鎼滅储鎸夐挳 */ + .sousuo { + margin: .35rem 0 .19rem; + } + + .search1 { + width: 5rem; + + } + + ::v-deep .search { + height: .36rem; + border-radius: .3rem; + align-items: center; + border-color: #597AA5 !important; + } + + ::v-deep .search .content { + height: 100% !important; + border: 0; + } + + ::v-deep .search .uni-input-placeholder { + font-size: .14rem; + } + + ::v-deep .search .uni-icons { + font-size: .14rem !important; + color: #244A7B !important; + } + + ::v-deep .search .uni-input-input, + ::v-deep .search .uni-select__input-box { + font-size: .14rem; + line-height: 1; + } + + ::v-deep .xiala { + width: 20% !important; + text-align: center; + } + + ::v-deep .uni-select__input-text { + color: #244A7B; + } + + ::v-deep .next-search-more .search { + border: 2px solid #597AA5 !important; + } + + ::v-deep .next-search-more .search .content { + border-left: 1px solid #597AA5 !important; + } + + .search1 ::v-deep .btnn { + /* border: 10px solid red; */ + width: .74rem !important; + height: .3rem; + line-height: .3rem; + text-align: center; + font-size: .14rem; + background-color: #597AA5; + border-radius: .5rem; + color: #fff; + margin-right: .03rem; + } + + .search1 ::v-deep .icon-del { + font-size: .24rem !important; + } + + .search1 ::v-deep .uni-select__selector-item { + position: relative; + z-index: 999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999 !important; + + display: flex; + justify-content: center; + font-size: .14rem; + height: .3rem; + line-height: .3rem; + } + + /* ------------- */ + /* 鐑棬鎼滅储 */ + .remen { + font-size: .12rem; + margin-top: .1rem; + color: #2C2C2C; + } + + /* --------- */ + + /* .boox { + width: 100%; + padding: .1rem .09rem; + + h3 { + font-size: .14rem; + } + } */ + .MargB { + margin-bottom: .2rem; + } + + /* 宸﹁竟鐨� */ + .boox { + width: 100%; + padding: .1rem .09rem; + min-height: 2rem !important; + position: relative; + border: 1px solid #c1d3ea !important; + + ul { + margin-top: .16rem !important; + } + + h3 { + font-size: .14rem; + margin-left: .1rem; + } + + li { + height: .3rem; + line-height: .3rem; + padding: 0 .2rem !important; + margin: .05rem 0 !important; + border-radius: .3rem !important; + font-size: .14rem; + } + + .toggleButton1 { + position: absolute; + bottom: .1rem !important; + left: 40% !important; + } + + .toggleButton { + font-size: .14rem !important; + } + } + + .a, + .b { + min-height: 3rem !important; + } + + .paixu { + /* margin-right: .3rem; + height: .24rem; */ + } + + .paixu ::v-deep .el-input__icon { + font-size: .12rem; + line-height: .24rem; + margin-right: .05rem; + } + + + .paixu ::v-deep .el-input__inner { + width: 1.09rem; + font-size: .12rem; + padding-left: .15rem; + height: .24rem; + line-height: .24rem; + color: #2C2C2C; + border-color: #9E9E9E; + } + + .el-select-dropdown__item { + font-size: .12rem; + height: .2rem; + line-height: .2rem; + } + + .rightList { + height: 1.6rem; + position: relative; + overflow: hidden; + margin-bottom: .2rem !important; + } + + .rightList ::v-deep .el-card__body { + padding: 0; + } + + .rightList .RightListTop { + margin: .14rem 0; + font-size: .14rem; + height: .24rem; + line-height: .24rem; + display: flex; + } + + .rightList .RightListTop .Topzhiwei { + width: .52rem; + margin-right: .08rem; + padding-right: .05rem; + } + + .rightList .RightListTop .TopName { + font-weight: 700; + color: #2C2C2C; + margin-right: .17rem; + } + + .rightList .RightListTop .TopDynasty { + width: .34rem; + height: .19rem; + font-size: .12rem; + line-height: .19rem; + text-align: center; + border-color: #9E9E9E; + color: #9E9E9E; + } + + .rightList .desBox { + padding: .14rem .2rem .23rem; + + /* position: relative; */ + .biecheng { + height: .24rem; + /* line-height: .24rem; */ + font-size: .12rem; + padding-left: .1rem; + background-color: #F0F0F0; + display: flex; + align-items: center; + margin-bottom: .12rem; + } + + .describe { + position: absolute; + bottom: .1rem; + left: 0; + /* width: 100%; */ + padding: 0 .23rem; + height: .49rem; + line-height: .24rem; + font-size: .12rem; + } + } </style> \ No newline at end of file diff --git a/pages/changePassword/changePassword.vue b/pages/changePassword/changePassword.vue new file mode 100644 index 0000000..6e58f32 --- /dev/null +++ b/pages/changePassword/changePassword.vue @@ -0,0 +1,596 @@ +<template> + <view class="container flex flex-center" style="align-items: flex-start;"> + <view class="repository relative"> + <view class="Ttop flex flex-center flex-wrap" style="flex-direction: column;"> + <view class=""></view> + <view class="" ref="Rtop"> + <text class="login"></text> + <text + style="font-size: .36rem;letter-spacing: 4rpx;vertical-align: middle;font-family: cursive;font-weight: bold;">涓浗鍖诲浜虹墿鐭ヨ瘑搴�</text> + </view> + <view></view> + </view> + <!-- 閲嶇疆瀵嗙爜 --> + <el-card> + <view class="LoginTop" + style="display: flex; justify-content: space-between;margin-bottom: .47rem;align-items: center;"> + <!-- <view class="" style="color: #244A7B;padding-bottom: .47rem;font-size: .3rem;font-weight: bold;">鐢ㄦ埛娉ㄥ唽</view> --> + <view class="LoginBg"></view> + <view class="" @click="BacktoLogin" + style="cursor: pointer;font-size: .14rem;color: #244A7B;font-weight: normal;"> + 杩斿洖鐧诲綍 + </view> + </view> + <el-form :hide-required-asterisk="true" ref="formLogin2" label-position="right" :rules="rules" + :model="amendDataPass"> + <el-form-item label="鐧诲綍璐﹀彿" prop="loginID"> + <el-input v-model="amendDataPass.loginID"></el-input> + </el-form-item> + <el-form-item label="鍘熷瘑鐮�" prop="rawPass"> + <el-input v-model="amendDataPass.rawPass"></el-input> + </el-form-item> + <el-form-item label="鏂板瘑鐮�" prop="newPass"> + <el-input v-model="amendDataPass.newPass"></el-input> + </el-form-item> + <el-form-item label="纭鏂板瘑鐮�" prop="checkPass"> + <el-input v-model="amendDataPass.checkPass"></el-input> + </el-form-item> + <el-form-item class="btn"> + <el-button class="font-family" + style="margin-top: 30rpx; font-weight:900;font-size: 30rpx; width: 100%;background-color: #244a7b;color: #fff;padding: 30rpx;" + size="medium" @click="Login2('formLogin2')">淇敼</el-button> + </el-form-item> + </el-form> + </el-card> + + </view> + <view class="hua"></view> + <!-- 搴曢儴浜虹墿鑳屾櫙鍥惧乏渚� --> + <view class="fff"></view> + <!-- 搴曢儴鑺辩殑鑳屾櫙鍥惧彸渚� --> + <view class="rrr"></view> + + <Footer1 /> + </view> +</template> + +<script> + import { + nextTick + } from "vue"; + import Footer1 from '@/components/footer/footer.vue' + export default { + components: { + Footer1 + }, + data() { + // 鏂板瘑鐮� + var validatePass = (rule, value, callback) => { + if (value === '') { + callback(new Error('璇疯緭鍏ュ瘑鐮�')); + } else { + if (this.amendDataPass.checkPass !== '') { + this.$refs.formLogin2.validateField('checkPass'); + } + callback(); + } + }; + // 纭 + var validatePass2 = (rule, value, callback) => { + if (value === '') { + callback(new Error('璇峰啀娆¤緭鍏ュ瘑鐮�')); + } else if (value !== this.amendDataPass.newPass) { + callback(new Error('涓ゆ杈撳叆瀵嗙爜涓嶄竴鑷�!')); + } else { + callback(); + } + }; + return { + // 鐢ㄦ埛娉ㄥ唽 + isRegister: false, + // 鐢ㄦ埛鐧诲綍 + isLogin: true, + // 淇敼瀵嗙爜 + isAmendPass: false, + // 閲嶇疆瀵嗙爜 + isResetPass: false, + // 娉ㄥ唽鐢ㄦ埛璐﹀彿鐨勬牎楠� + rules: { + loginID: [{ + required: true, + message: '璇疯緭鍏ョ櫥褰曡处鍙�', + trigger: 'blur' + }], + rawPass: [{ + required: true, + message: '璇疯緭鍏ュ師濮嬪瘑鐮�', + trigger: 'blur' + }, + { + min: 6, + max: 12, + message: '瀵嗙爜闀垮害鍦� 6 鍒� 12 涓瓧绗�', + trigger: 'blur' + } + ], + newPass: [{ + required: true, + message: '璇疯緭鍏ユ柊瀵嗙爜', + trigger: 'blur' + }, + { + min: 6, + max: 12, + message: '瀵嗙爜闀垮害鍦� 6 鍒� 12 涓瓧绗�', + trigger: 'blur' + }, + { + validator: validatePass, + trigger: 'blur' + } + ], + checkPass: [{ + validator: validatePass2, + trigger: 'blur' + }], + cellphoneORmailbox: [{ + required: true, + message: '璇疯緭鍏ラ偖绠卞湴鍧�', + trigger: 'blur' + }, + { + type: 'email', + message: '璇疯緭鍏ユ纭殑閭鍦板潃', + trigger: ['blur', 'change'] + } + ], + verifyCode: [{ + required: true, + message: '璇疯緭鍏ラ獙璇佺爜', + trigger: 'blur' + }, + { + validator: (rule, value, callback) => this.validateVerificationCode(rule, value, callback), + trigger: 'blur' + } + ] + }, + // 鐧诲綍娉ㄥ唽妗� + loginTrue: true, + Rtop1: 0, + value: 'sdfdsf', + // 淇敼瀵嗙爜 + amendDataPass: { + loginID: '', + rawPass: "", + newPass: "", + checkPass: "" + }, + // 涔︾睄鏁版嵁 + listData: [{ + name: '鍘嗕唬鍖诲浼犺搴�', + id: 1, + }, { + name: '涓栧尰鍖诲搴�', + id: 2, + }, { + name: '鍖诲瀛︽湳娴佹淳', + id: 3, + }, { + name: '涓浗鍦板煙鍖昏氨', + id: 4, + }, { + name: '涓浗鍖讳簨鍒跺害', + id: 5, + }, + + ] + } + }, + onLoad() { + uni.getSystemInfo({ + success: function(info) { + // console.log('灞忓箷鐨勫搴︼細' + info.windowWidth); + // console.log('灞忓箷鐨勯珮搴︼細' + info.windowHeight); + } + }); + }, + mounted() { + this.getElementWidth(); + }, + methods: { + // 宸叉湁璐﹀彿锛熻繑鍥炵櫥褰� + BacktoLogin() { + uni.redirectTo({ + url: '/pages/Login/Login' + }) + }, + // 鑾峰彇楠岃瘉鐮� + verifyCodeClick() { + console.log('鑾峰彇楠岃瘉鐮�'); + }, + // 鍒楄〃椤硅烦杞� + listDataClick(item) { + console.log(item); + // 鍦ㄥ綋鍓嶉〉闈㈣缃叏灞�鍙橀噺 + // uni.setStorageSync('globalData', { id: 123, name: 'example' }); + if (item.id == 1) { + uni.navigateTo({ + url: '/pages/repository/repository?id=' + item.id + }) + } else if (item.id == 2) { + console.log(item.name); + // uni.navigateTo({ + // url:'/pages/repository/repository?id='+item.id + // }) + } else if (item.id == 3) { + uni.navigateTo({ + url: '/pages/dataDisplay/dataDisplay?id=' + item.id + }) + } else if (item.id == 4) { + uni.navigateTo({ + url: '/pages/territory/territory?id=' + item.id + }) + } else if (item.id == 5) { + uni.navigateTo({ + url: '/pages/TcmSystem/TcmSystem?id=' + item.id + }) + } + }, + // 楠岃瘉鐮佹牎楠� + validateVerificationCode(rule, value, callback) { + console.log(value) + if (value !== '123456') { + callback(new Error('楠岃瘉鐮侀敊璇�')); + } else { + callback(); + } + }, + getElementWidth() { + this.$nextTick(() => { + var width = this.$refs.Rtop.$el.clientWidth; + this.Rtop1 = width + 50; + console.log('Element width:', width); + }) + }, + // 鐢ㄦ埛鐧诲綍 + Login(formName) { + console.log('鐢ㄦ埛鐧诲綍鐨勭櫥褰曟寜閽�'); + this.$refs[formName].validate((valid) => { + if (valid) { + alert('submit!鎴愬姛'); + uni.navigateTo({ + url: '/pages/Login/Login' + }) + } else { + console.log('error submit!!澶辫触'); + return false; + } + }); + }, + // 蹇樿瀵嗙爜 + Login2(formName) { + console.log('蹇樿瀵嗙爜鐨勭櫥褰曟寜閽�'); + this.$refs[formName].validate((valid) => { + if (valid) { + alert('submit!鎴愬姛'); + uni.redirectTo({ + url: '/pages/Login/Login' + }) + } else { + console.log('error submit!!澶辫触'); + return false; + } + }); + } + } + } +</script> +<style scoped> + /* + 鍦ㄥ睆骞曞搴﹁秴杩� 1440px 鏃剁殑鏍峰紡璁剧疆 */ + /* @media screen and (min-width: 1441px) { + ::v-deep .el-card { + top: 60% !important; + } + .BottomColumn{ + padding: .10rem 0; + } + .LoginTop{ + margin-bottom: .17rem !important; + } + .btn ::v-deep .el-button{ + margin-top: 0.1rem !important; + font-size: 0.2rem !important; + width: 100%; + padding: 0.12rem !important; + } + .LoginBg{ + height: .3rem !important; + } + .hua{ + height: 4rem !important; + }.fff{ + height: 3.5rem !important; + }.rrr{ + height: 2.5rem !important; + } + } + */ + @media screen and (min-width:2560px)and (max-width:3840px) { + .LoginBg { + margin: 0 !important; + height: .3rem !important; + } + + ::v-deep .el-card { + top: 90% !important; + padding: 0 !important; + } + + ::v-deep .el-card__body { + padding: .25rem .5rem !important; + } + + ::v-deep .el-form { + padding-left: .1rem !important; + } + + ::v-deep .el-form-item__error { + font-size: .13rem !important; + } + + ::v-deep .el-input__inner { + height: .35rem !important; + font-size: .14rem; + } + + ::v-deep .el-form-item__label { + display: flex; + align-items: center; + justify-content: flex-end; + margin-right: .2rem !important; + width: .7rem; + } + + .hua { + height: 4rem !important; + } + + .LoginTop { + margin-bottom: .4rem !important; + } + + .yzm { + top: 15% !important; + } + + .fff { + width: 2.4rem !important; + height: 4rem !important; + } + + .rrr { + width: 2rem !important; + } + + .btn { + margin-bottom: .1rem !important; + } + + .btn ::v-deep .el-button { + margin-top: 0.2rem !important; + font-size: 0.2rem !important; + width: 100%; + padding: 0.12rem !important; + + span { + font-weight: bold !important; + } + } + + .asdf { + margin-bottom: .1rem !important; + } + + } + + .LoginBg { + width: 1.2rem; + height: .37rem; + background: url(@/static/image/淇敼瀵嗙爜.png) no-repeat 0 0; + background-size: 100% 100%; + + } + + + ::v-deep .el-card { + border-radius: 0; + width: 5.42rem; + /* height: 5.65rem; */ + position: absolute; + top: 80%; + } + + ::v-deep .el-card__body { + padding: .26rem .58rem; + } + + .btn>>>.el-form-item__content { + margin-left: 0 !important; + + } + + ::v-deep .el-form-item__content { + margin-left: 0 !important; + flex: 1; + } + + ::v-deep .el-input__inner { + border: none; + border-bottom: 1px solid #2d476a; + border-radius: 0; + padding: 0; + height: .4rem; + line-height: .4rem; + } + + ::v-deep .el-form-item__error { + /* display: none; */ + } + + ::v-deep .input.invalid:focus { + border-color: #2d476a !important; + } + + ::v-deep .el-input__inner:invalid { + border-color: #2d476a !important; + } + + + ::v-deep .el-form-item__label { + min-width: .6rem; + padding: 0; + color: #244A7B; + font-size: .14rem; + font-weight: 500; + margin-right: .29rem; + } + + ::v-deep .el-form-item { + margin-bottom: .22rem; + display: flex; + } + + .ss1 { + background-repeat: no-repeat; + background-size: 100% 100%; + width: 40rpx; + height: 40rpx; + background-size: 100% 100%; + } + + .s1 { + background-image: url(@/static/image/search.png); + + } + + .s2 { + background-image: url(@/static/image/question.png); + } + + .s3 { + background-image: url(@/static/image/question.png); + } + + .container { + background: url(@/static/image/bg1.png); + width: 100vw; + height: 100vh; + + color: #fff; + + .repository { + width: 100% !important; + /* margin-top: 19px; */ + /* height: 68%; */ + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + + .Ttop { + margin-top: .38rem; + margin-bottom: 1.22rem; + } + + .r-top { + font-size: 40rpx !important; + margin: 10rpx 0; + } + } + + } + + .login { + width: .52rem; + height: .52rem; + display: inline-block; + vertical-align: middle; + margin-right: .19rem; + background: url(@/static/image/logo.png) no-repeat 0 0; + background-size: 100% 100%; + } + + .rrr { + position: absolute; + right: .53rem; + bottom: .36rem; + width: 2.5rem; + height: 3.07rem; + opacity: 1; + background: url(@/static/image/bg4.png); + background-size: 100% 100%; + } + + .hua { + width: 13.81rem; + height: 5.965rem; + position: absolute; + background: url(@/static/image/bg3.png) no-repeat 0 0; + background-size: 100% 100%; + } + + /* 搴曢儴浜虹墿鑳屾櫙鍥� */ + .fff { + background: url(@/static/image/bg2.png) no-repeat 0 0; + background-size: 100% 100%; + width: 2.74rem; + height: 4.52rem; + position: fixed; + bottom: 0; + z-index: 9999999999999; + left: 0; + } + + ::v-deep .uni-easyinput__content { + border-radius: 30rpx !important; + /* height: 52rpx; */ + } + + + .secretary { + width: 1300rpx !important; + height: 50rpx; + /* height: 80%; */ + /* flex-wrap: wrap; */ + padding: 0 20px; + text-align: center; + + + + + li { + background-color: #fff; + color: black; + height: 600rpx; + display: flex; + justify-content: space-between; + flex-direction: column; + align-items: center; + border: 1rpx solid #fff; + padding: 50rpx 65rpx; + /* padding: 58rpx 128rpx 88rpx; */ + text-align: center; + background: #EBF4FF; + } + } + + + + .Bbottom { + display: flex; + justify-content: center; + + } +</style> \ No newline at end of file diff --git a/pages/characterMap/characterMap.vue b/pages/characterMap/characterMap.vue index ff091e6..6f3a47c 100644 --- a/pages/characterMap/characterMap.vue +++ b/pages/characterMap/characterMap.vue @@ -1,6 +1,7 @@ <template> <view> <headNav /> + <el-button class="getBack" @click="getBack">杩斿洖</el-button> <view class="" style="position: relative;"> <!-- 鍦板浘 --> <view id="spaceTime" style="height: 90vh;width: 100%;position: relative;"></view> @@ -23,12 +24,15 @@ <img style="width: 100%;height: 2rem;" src="https://img0.baidu.com/it/u=1845740325,2917001370&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1711731600&t=0b208ab46e1d33aa81ac31dd6bf627be" alt="" /> - <view class="" style="border: 1px solid ; position: absolute;bottom: 0; width: 80%;left: 10%;"> - <!-- <div style="text-align: center; margin-bottom: 20px;">{{currentYear}}</div> - <el-slider v-model="sliderValue" :min="1900" :step="10" :max="2000" :show-stops="true" - @change="handleSliderChange"></el-slider> --> - <input type="range" min="0" max="100" v-model="sliderValue"> - </view> + <div class="box" style="width: 80%;"> + <span class="span" :style="{'marginLeft': spanML+'rem'}">{{span}}骞�</span> + <div class="scales"> + <view v-for="(item,index) in yearArr" @click="scaleClick(index)" class="scale" + :data-index="index"></view> + </div> + <div class="MX"></div> + <div class="cursor" :style="{'marginLeft': cursorML+'rem'}"></div> + </div> </el-dialog> </view> </view> @@ -44,23 +48,89 @@ export default { data() { return { - menuNav: true, + menuNav: false, sliderValue: 2024, currentYear: 2024, - sliderValue: 50 + sliderValue: 50, + MX: document.querySelector(".MX"), + box: document.querySelector(".box"), + span: '', + yearArr: [], + yearIndex: 0, + spanML: 0, + cursorML: -.05 } }, + mounted() { // 鏃剁┖鍦板浘 loadBMap('5USVDAhhS4ssz44HLq3gNPZai7naXf4Q').then(() => { this.spaceTime() }) + this.$nextTick(() => { + this.aaa() + }) }, methods: { + // 杩斿洖鎸夐挳 + getBack() { + uni.navigateBack(); + }, + aaa() { + // 娓叉煋姣嶇嚎 + this.addArr() + }, + addArr(start = 894, end = 900) { + for (let i = start; i <= end; i++) { + this.yearArr.push(i) + } + this.span = this.yearArr[0] + this.$nextTick(() => { + // this.creatMX(this.yearArr.length - 1) + // this.creatScale(this.yearArr) + }) + }, + creatMX(len) { + console.log(len); + let width = len * 50 + 10 + // this.MX.style.width = `${width}px` + // this.scales.style.width = `${width}px` + // console.log(this.box.style.width); + }, + creatScale() { + // for (let i = 0; i < this.yearArr.length; i++) { + // let scale = document.createElement("div") + // scale.className = "scale" + // scale.setAttribute("index", i) + // scale.addEventListener("click", this.scaleClick) + // scales.appendChild(scale) + // } + // console.log(arr[0]); + + }, + handleSliderChange(value) { this.currentYear = value; }, + scaleClick(i) { + // let i = Number(this.getAttribute("data-index")) + console.log(i, this.cursorML); + + if (i > this.yearIndex) { + + this.cursorML += (i - this.yearIndex + +('0.0' + this.yearIndex)) / 1.9 + // this.spanML += 50 * (i - this.yearIndex) + console.log((i - this.yearIndex + 0.2), 'aaaa'); + + } else { + this.cursorML -= (this.yearIndex - i) / 2 + 0.04 + // this.spanML -= 50 * (this.yearIndex - i) + console.log(this.yearIndex, i, 'bbbb'); + } + this.yearIndex = i + }, + // ________________________ // 鏃剁┖鍦板浘 spaceTime() { var chartDom = document.getElementById('spaceTime'); @@ -100,7 +170,7 @@ value: 273 }, { - name: 'sss澶у簡', + name: '鍟婁笁澶х熆鍙婅鍒板簳鏄皝寤哄+澶уか澶у笀鍌呭氨', value: 279 } ]; @@ -132,7 +202,7 @@ 鑿忔辰: [115.480656, 35.23375], 鍚堣偉: [117.27, 31.86], 姝︽眽: ['浣犲ソ', 30.52], - sss澶у簡: [125.03, 46.58] + 鍟婁笁澶х熆鍙婅鍒板簳鏄皝寤哄+澶уか澶у笀鍌呭氨: [125.03, 46.58] }; const convertData = function(data) { var res = []; @@ -215,75 +285,153 @@ ] } }, - series: [ - { - type: 'effectScatter', - coordinateSystem: 'bmap', - data: convertData( - data - .sort(function(a, b) { - return b.value - a.value; - }) - .slice(0, 6) - ), - symbolSize: function(val) { - return val[2] / 10; - }, - encode: { - value: 2 - }, - showEffectOn: 'render', - rippleEffect: { - brushType: 'stroke' - }, - label: { - formatter: '{b}', - position: 'bottom', - backgroundColor: 'rgba(255, 255, 255, 1)', - padding: [4, 8], - formatter: function(params) { // 浣跨敤鍑芥暟鍔ㄦ�佺敓鎴愭爣绛惧唴瀹� + series: [{ + type: 'effectScatter', + coordinateSystem: 'bmap', + data: convertData( + data + .sort(function(a, b) { + return b.value - a.value; + }) + .slice(0, 6) + ), + symbolSize: function(val) { + return val[2] / 10; + }, + encode: { + value: 2 + }, + showEffectOn: 'render', + rippleEffect: { + brushType: 'stroke' + }, + label: { + formatter: '{b}', + position: 'bottom', + backgroundColor: 'rgba(255, 255, 255, 1)', + padding: [4, 8], + formatter: function(params) { // 浣跨敤鍑芥暟鍔ㄦ�佺敓鎴愭爣绛惧唴瀹� // 璁剧疆鏂囧瓧澶氬皯涓悗闈㈡樉绀虹渷鐣ュ彿 - if (params.data.name.length > 3) { - return params.data.name.substring(0, 3) + '...'; - } else { - return params.data.name; - } - }, - show: true, - fontSize: 12, - borderRadius: 30, + if (params.data.name.length > 6) { + return params.data.name.substring(0, 6) + '...'; + } else { + return params.data.name; + } }, - itemStyle: { - shadowBlur: 10, - shadowColor: '#333' - }, - emphasis: { - scale: true - }, - zlevel: 1 - } - ] + show: true, + fontSize: 12, + borderRadius: 30, + }, + itemStyle: { + shadowBlur: 10, + shadowColor: '#333' + }, + emphasis: { + scale: true + }, + zlevel: 1 + }] }; + let menuNav1 = this.menuNav + let menuNav2 = this.menuNav // 璁剧疆鐐瑰嚮浜嬩欢鐩戝惉 - myChart.on('click', function(params) { + myChart.on('click', (params) => { + // menuNav2 = !menuNav1 + // console.log(menuNav); if (params.componentType === 'series') { + var dataName = params.data.name; // 鑾峰彇鐐瑰嚮鐨勬暟鎹悕绉� var dataValue = params.data.value; // 鑾峰彇鐐瑰嚮鐨勬暟鎹�� // 鍦ㄨ繖閲屽彲浠ユ牴鎹渶瑕佸鐞嗙偣鍑讳簨浠讹紝姣斿寮瑰嚭瀵瑰簲鏁版嵁鐨勮缁嗕俊鎭瓑鎿嶄綔 - console.log('鐐瑰嚮浜�', dataName, '鏁版嵁锛屾暟鍊间负', dataValue); + // console.log('鐐瑰嚮浜�', dataName, '鏁版嵁锛屾暟鍊间负', dataValue); // 杩欓噷鍙互缂栧啓瑙﹀彂鏃堕棿鑾峰彇瀵瑰簲鏁版嵁淇℃伅鐨勯�昏緫 + this.spaceTimeArr(params) } }) option && myChart.setOption(option); - }, - + // 鏃剁┖鍦板浘鐐瑰嚮鏃惰幏鍙栫殑鏁版嵁 + spaceTimeArr(Arr) { + // 淇敼 Vue 缁勪欢鐨勬暟鎹紝渚嬪鏄剧ず鑿滃崟瀵艰埅 + this.menuNav = !this.menuNav + // 鏃剁┖鍦板浘鐨勬暟鎹� + console.log(Arr); + } } } </script> <style scoped> + .getBack { + position: fixed; + width: .6rem; + height: .24rem; + top: 1rem; + left: .24rem; + z-index: 99999; + font-size: .12rem; + display: flex; + align-items: center; + justify-content: center; + color: #2C2C2C; + border-color: #9E9E9E; + border-radius: 0; + font-weight: 700; + } + + .box { + position: absolute; + bottom: 10%; + left: 50%; + height: .3rem; + transform: translate(-50%, -50%); + } + + .MX { + height: 20px; + background-color: #ccc; + } + + .scale { + width: 3px; + height: 50px; + background-color: #ccc; + cursor: pointer; + } + + .scales { + display: flex; + align-items: center; + justify-content: space-between; + } + + .span { + font-size: 25px; + color: rgb(0, 68, 255); + margin-left: -34px; + } + + .cursor { + position: relative; + width: 25px; + height: 30px; + background-color: rgb(0, 68, 255); + margin-top: 30px; + margin-left: -12.5px; + } + + .cursor:before { + content: ""; + position: absolute; + top: -20px; + width: 0; + height: 0; + border-left: 13px solid transparent; + border-right: 13px solid transparent; + border-bottom: 20px solid rgb(0, 68, 255); + } + ::v-deep .particulars { position: absolute !important; top: 0; @@ -314,5 +462,4 @@ position: relative; height: 100%; } - </style> \ No newline at end of file diff --git a/pages/characterRelation/characterRelation.vue b/pages/characterRelation/characterRelation.vue index ababaa4..d56cbb9 100644 --- a/pages/characterRelation/characterRelation.vue +++ b/pages/characterRelation/characterRelation.vue @@ -3,14 +3,13 @@ <headNav /> <!-- 楂樼骇鎼滅储 --> <view style="margin: .35rem 0 .16rem 0; "> - <advancedSearch /> + <advancedSearch placehold="杈撳叆濮撳悕/鍒悕/鏈濅唬/浼犱富鑱屼笟鎼滅储"/> </view> <!-- 鐑棬鎼滅储 --> - <view class="flex flex-center" style="font-size: .1rem;color: #2C2C2C;"> + <view class="flex flex-center hotSearch"> 鐑棬鎼滅储锛� <ul class="flex" style="margin-right: 10rpx;"> - <li v-for="item in hot" :key="item.id" - style="color: #244A7B; margin: 0 .1rem;color: #5879a4;font-size: .12rem;"> + <li v-for="item in hot" :key="item.id" style=""> {{item.name}} </li> </ul> @@ -148,6 +147,27 @@ // 鍏朵粬鍏崇郴... ]; + 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 + } // 鏍规嵁鍏崇郴鏁版嵁鐢熸垚杩炴帴绾� var links = []; relationships.forEach(function(relationship) { @@ -166,15 +186,15 @@ .relation; }, // 璁剧疆鍏崇郴鏍囩鍐呭涓�"Child-Parent" color: '#2C2C2C', - fontSize: 12, + fontSize: FontSize - 2, backgroundColor: 'rgba(255, 255, 255, 1)', padding: [3, 8], borderRadius: 30, position: 'middle', // 璁剧疆鏍囩鏂囨湰鍦ㄧ嚎鐨勪腑闂翠綅缃笂灞呬腑鏄剧ず - bottom: -10, + // bottom: -(FontSize+10), z: 10, // 璁剧疆鏍囩鐨剒杞撮珮搴︼紝浣垮叾姣旇繛鎺ョ嚎鏇撮珮 // offset: [0, 15] ,// 寰�涓嬬Щ鍔� 10 鍍忕礌 - distance: -12, // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂 + distance: -(Distance + 1), // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂 } }); } @@ -189,7 +209,7 @@ y: Math.random() * 600, // 璁剧疆闅忔満y鍧愭爣浣嶇疆 itemStyle: { color: getColorByIndex(index), // 鍙互鏍规嵁绱㈠紩璁剧疆涓嶅悓鐨勯鑹� - borderWidth: 2, + borderWidth: BorderWidth, borderColor: getColorByIndex(index + 1) } }; @@ -201,6 +221,19 @@ } var option; option = { + title: { + // text: '涔︿腑鏈�甯告彁鍒扮殑100浣嶄汉鐗�', + subtext: '涔︿腑鏈�甯告彁鍒扮殑100浣嶄汉鐗�', + left: 'center', + top: FontSize + 10, + // textStyle: { + // fontSize: FontSize // 璁剧疆鏍囬鏂囧瓧澶у皬涓� 18px + // }, + subtextStyle: { + fontSize: FontSize ,// 璁剧疆鍓爣棰樻枃瀛楀ぇ灏忎负 14px + color:'#2C2C2C' + } + }, backgroundColor: { type: 'image', image: '/static/image/characterRelationBg.png', @@ -214,11 +247,11 @@ series: [{ type: 'graph', layout: 'none', - symbolSize: 40, // 璋冩暣鑺傜偣澶у皬 + symbolSize: SymbolSize, // 璋冩暣鑺傜偣澶у皬 label: { show: true, color: 'black', // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹� - + fontSize: FontSize, // 璁剧疆鏂囧瓧澶у皬 }, edgeSymbol: ['circle'], edgeSymbolSize: [4, 10], @@ -240,10 +273,40 @@ mounted() { // 鍏崇郴鍥捐氨 this.relation() + + // 鐩戝惉绐楀彛澶у皬鍙樺寲 + window.addEventListener('resize', this.relation); } } </script> <style> + @media screen and (min-width:2560px)and (max-width:3840px) {} + @media screen and (min-width:1366px) and (max-width:1920px) {} + + ::v-deep .uni-input-placeholder { + line-height: 1; + font-size: .12rem; + } + + ::v-deep .ffff { + border-radius: .5rem; + } + + ::v-deep .widget_button { + border-radius: .5rem; + margin: .02rem; + } + + .hotSearch { + font-size: .12rem; + color: #2C2C2C; + + li { + color: #244A7B; + margin: 0 .1rem; + color: #244A7B; + } + } </style> \ No newline at end of file diff --git a/pages/dataDisplay/dataDisplay.vue b/pages/dataDisplay/dataDisplay.vue index f6a1290..f39cd35 100644 --- a/pages/dataDisplay/dataDisplay.vue +++ b/pages/dataDisplay/dataDisplay.vue @@ -1,21 +1,22 @@ -<template> - <view> - <view class="NavTop flex"> - <view class=""><img src="../../static/涓尰浜虹墿鐭ヨ瘑搴�0201/涓夋潯鏉�.png" alt="" /></view> - <view class="">鍘嗕唬瀛︽湳娴佹淳</view> - <view class="NavTopr"> - <img src="../../static/涓尰浜虹墿鐭ヨ瘑搴�0201/涓夋潯鏉�.png" alt="" /> - <img src="../../static/涓尰浜虹墿鐭ヨ瘑搴�0201/涓夋潯鏉�.png" alt="" /> - <img src="../../static/涓尰浜虹墿鐭ヨ瘑搴�0201/涓夋潯鏉�.png" alt="" /> - </view> +<template > + <view > + <!-- 椤堕儴瀵艰埅 --> + <headNav :idIndex="idIndex" text="鍘嗕唬瀛︽湳娴佹淳"/> + <!-- 瀛︽淳 --> + <view class="flex flex-center" style="width: 100%; margin: .2rem 0;"> + <ul class="flex"> + <li style="" v-for="(item,index) in dynasty" :key="item.id"> + <view @click="SchoolClick(item.id)" class="flex flex-center font-family school" + :style="{'marginRight': index === dynasty.length - 1 ? '0' : '0.03rem'}" + style="font-weight: 500; border-radius: .3rem; padding: .06rem .15rem; color: #2C2C2C; font-size: .12rem; margin-top: .03rem;margin-right: .1rem;background-color: #fff;"> + <view class="" :style="{background:item.color}" style="margin-right: .07rem; width: .12rem;height: .12rem;border-radius: 50%;"></view> + <view class="" style="color: #2C2C2C;font-size: .12rem;">{{item.name}}</view> + </view> + </li> + </ul> </view> - <view class="mImage"> - <img src="https://img0.baidu.com/it/u=3838093562,4126749835&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1710522000&t=a986064700deada5ec74d05e02abd8b5" - alt="" /> - </view> - - <view class=""> - <view id="line-chart" style="width: 100vw;height: 500px;"></view> + <view class="" style="background-color: #fff;"> + <view id="line-chart" style="width: 100vw;"></view> </view> </view> </template> @@ -26,6 +27,42 @@ export default { data() { return { + // 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ + idIndex:0, + // 鏈濅唬 + dynasty: [{ + name: '鍖荤粡瀛︽淳', + color: '#90BBD8', + id: 1 + }, { + name: '缁忔柟瀛︽淳', + color: '#EDD28B', + id: 2 + }, { + name: '浼ゅ瘨瀛︽淳', + color: '#CF746D', + id: 3 + },{ + name: '娌抽棿瀛︽淳', + color: '#9CC27A', + id: 4 + }, { + name: '鏀婚偑瀛︽淳', + color: '#5B6CB9', + id:5 + }, { + name: '婊嬮槾瀛︽淳', + color: '#8860A8', + id: 6 + }, { + name: '鏄撴按瀛︽淳', + color: '#DE8E66', + id: 7 + }, { + name: '娓╄ˉ瀛︽淳', + color: '#7FAC8C', + id: 8 + }], chartData: [{ name: '浣犲ソ', values: [30, 10, 100, 400, 30, 70] @@ -35,7 +72,18 @@ }] } }, + onLoad(options) { + this.idIndex = options.id + console.log('optionsoptionsoptions',options.id); + }, methods: { + // + SchoolClick(id){ + console.log(id); + uni.navigateTo({ + url:'/pages/interchannel/interchannel?id='+this.idIndex + }) + }, renderChart() { const chart = echarts.init(document.getElementById('line-chart')); const xAxisData = ['1950', '1955', '1960', '1965', '1970', '1975', '123']; @@ -65,17 +113,39 @@ }); const option = { - legend: { - data: this.chartData.map(item => item.name), - }, + // legend: { + // data: this.chartData.map(item => item.name), + // }, + zoom: 8,// 杩欓噷鍙互鏍规嵁闇�瑕佽皟鏁寸缉鏀剧骇鍒� + xAxis: { type: 'category', data: xAxisData, + axisLabel: { + fontSize: 32 // 璁剧疆 x 杞翠笂鏂囧瓧鐨勫瓧浣撳ぇ灏忎负 12 鍍忕礌 + }, + axisLine: { + lineStyle: { + width: 4 // 璁剧疆x杞寸嚎鏉″搴︿负2鍍忕礌 + } + } }, yAxis: { type: 'value', + axisLabel: { + fontSize: 32 // 璁剧疆 x 杞翠笂鏂囧瓧鐨勫瓧浣撳ぇ灏忎负 12 鍍忕礌 + }, + axisLine: { + lineStyle: { + width: 10 // 璁剧疆x杞寸嚎鏉″搴︿负2鍍忕礌 + } + } }, series: series, + // 鍏朵粬閰嶇疆椤�... + textStyle: { + fontSize: 30 // 璁剧疆鍏ㄥ眬鏂囧瓧鐨勫瓧浣撳ぇ灏� + }, }; chart.setOption(option); @@ -91,7 +161,9 @@ view { color: #fff; } - + .school{ + + } .bag { height: 100vh; background-color: #fff; @@ -122,4 +194,7 @@ vertical-align: top; } } + #line-chart{ + height: 6rem; + } </style> \ No newline at end of file diff --git a/pages/forgetPass/forgetPass.vue b/pages/forgetPass/forgetPass.vue index bc361f6..de32f85 100644 --- a/pages/forgetPass/forgetPass.vue +++ b/pages/forgetPass/forgetPass.vue @@ -11,7 +11,7 @@ <view></view> </view> <!-- 閲嶇疆瀵嗙爜 --> - <el-card > + <el-card> <view class="LoginTop" style="display: flex; justify-content: space-between;margin-bottom: .47rem;align-items: center;"> <!-- <view class="" style="color: #244A7B;padding-bottom: .47rem;font-size: .3rem;font-weight: bold;">鐢ㄦ埛娉ㄥ唽</view> --> @@ -21,15 +21,15 @@ 杩斿洖鐧诲綍 </view> </view> - <el-form :hide-required-asterisk="true" ref="formLogin2" label-position="left" - :rules="rules" :model="resetDataPass"> + <el-form :hide-required-asterisk="true" ref="formLogin2" label-position="right" :rules="rules" + :model="resetDataPass"> <el-form-item label="鎵嬫満/閭" prop="cellphoneORmailbox"> <el-input v-model="resetDataPass.cellphoneORmailbox"></el-input> </el-form-item> <el-form-item label="楠岃瘉鐮�" prop="verifyCode"> <view class="verifyCode relative"> - <el-input v-model="resetDataPass.verifyCode" ></el-input> - <view @click="verifyCodeClick" class="" + <el-input v-model="resetDataPass.verifyCode"></el-input> + <view @click="verifyCodeClick" class="yzm" style="position: absolute;right: 0%;top: 0%;color: #244A7B;font-size: .14rem;font-weight: 500;"> 鑾峰彇楠岃瘉鐮�</view> </view> @@ -37,17 +37,17 @@ <el-form-item label="鏂板瘑鐮�" prop="pass"> <el-input v-model="resetDataPass.newPass"></el-input> </el-form-item> - <el-form-item label="纭瀵嗙爜" prop="checkPass"> + <el-form-item label="纭鏂板瘑鐮�" prop="checkPass"> <el-input v-model="resetDataPass.checkPass"></el-input> </el-form-item> <el-form-item class="btn"> <el-button class="font-family" style="margin-top: 30rpx; font-weight:900;font-size: 30rpx; width: 100%;background-color: #244a7b;color: #fff;padding: 30rpx;" - size="medium" @click="Login2('formLogin2')">纭畾</el-button> + size="medium" @click="Login2('formLogin2')">閲嶇疆瀵嗙爜</el-button> </el-form-item> </el-form> </el-card> - + </view> <view class="hua"></view> <!-- 搴曢儴浜虹墿鑳屾櫙鍥惧乏渚� --> @@ -305,7 +305,7 @@ <style scoped> /* 鍦ㄥ睆骞曞搴﹁秴杩� 1440px 鏃剁殑鏍峰紡璁剧疆 */ - @media screen and (min-width: 1441px) { + /* @media screen and (min-width: 1441px) { ::v-deep .el-card { top: 60% !important; } @@ -332,6 +332,84 @@ height: 2.5rem !important; } } + */ + @media screen and (min-width:2560px)and (max-width:3840px) { + .LoginBg { + margin: 0 !important; + height: .3rem !important; + } + + ::v-deep .el-card { + top: 90% !important; + padding: 0 !important; + } + + ::v-deep .el-card__body { + padding: .25rem .5rem !important; + } + + ::v-deep .el-form { + padding-left: .1rem !important; + } + + ::v-deep .el-form-item__error { + font-size: .13rem !important; + } + + ::v-deep .el-input__inner { + height: .35rem !important; + font-size: .14rem; + } + + ::v-deep .el-form-item__label { + display: flex; + align-items: center; + justify-content: flex-end; + margin-right: .2rem !important; + width: .7rem; + } + + .hua { + height: 4rem !important; + } + + .LoginTop { + margin-bottom: .4rem !important; + } + + .yzm { + top: 15% !important; + } + + .fff { + width: 2.4rem !important; + height: 4rem !important; + } + + .rrr { + width: 2rem !important; + } + + .btn { + margin-bottom: .1rem !important; + } + + .btn ::v-deep .el-button { + margin-top: 0.2rem !important; + font-size: 0.2rem !important; + width: 100%; + padding: 0.12rem !important; + + span { + font-weight: bold !important; + } + } + + .asdf { + margin-bottom: .1rem !important; + } + + } .LoginBg { width: 1.2rem; diff --git a/pages/index/index.vue b/pages/index/index.vue index 87e66b8..638a00c 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -19,7 +19,7 @@ </view> <!-- 楂樼骇鎼滅储 --> - <view v-if="isSearchTrue" style="margin: .35rem 0 .16rem 0; height: .52rem;"> + <view v-if="isSearchTrue" class="Search" style="margin: .35rem 0 .16rem 0; height: .52rem;"> <advancedSearch @onSearch="onSearch" :isAvancedTrue="false" :isSearchTrue="false" /> </view> </view> @@ -36,6 +36,7 @@ </li> </ul> </view> + </view> <view class="hua"></view> <!-- 搴曢儴浜虹墿鑳屾櫙鍥惧乏渚� --> @@ -43,7 +44,7 @@ <!-- 搴曢儴鑺辩殑鑳屾櫙鍥惧彸渚� --> <view class="rrr"></view> - <Footer1 /> + <Footer1 /> </view> </template> @@ -141,9 +142,9 @@ }) } else if (item.id == 2) { console.log(item.name); - // uni.navigateTo({ - // url:'/pages/repository/repository?id='+item.id - // }) + uni.navigateTo({ + url:'/pages/zhongyi/zhongyi?id='+item.id + }) } else if (item.id == 3) { uni.navigateTo({ url: '/pages/dataDisplay/dataDisplay?id=' + item.id @@ -190,7 +191,7 @@ <style scoped> /* 鍦ㄥ睆骞曞搴﹁秴杩� 1440px 鏃剁殑鏍峰紡璁剧疆 */ - @media screen and (min-width: 1441px) { + /* @media screen and (min-width: 1441px) { ::v-deep .el-card { top: 60% !important; } @@ -232,7 +233,157 @@ .rrr { height: 2.5rem !important; } + } */ +@media screen and (min-width:2560px)and (max-width:3840px){ + .Ttop{ + margin-bottom: .7rem !important; + margin-top: .3rem !important; } + .login{ + width: .52rem !important; + height: .52rem !important; + } + .LoginBg{ + margin: 0 !important; + height: .3rem !important; + } + + ::v-deep .Bbar img{ + width: .52rem !important; + height: .52rem !important; + } + + ::v-deep .el-card { + top: 90% !important; + padding: 0 !important; + } + ::v-deep .el-card__body{ + padding: .25rem .5rem !important; + } + .Search ::v-deep .flex-center{ + height: 80% !important; + } + ::v-deep .searchBg{ + width: .35rem; + height: .35rem; + margin-right: .03rem; + } + ::v-deep .ffff{ + border-radius: .3rem !important; + } + ::v-deep .searchBg{ + border-radius: inherit !important; + } + ::v-deep .uni-input-placeholder{ + font-size: .14rem; + height: 100%; + display: flex; + align-content: center; + align-items: center; + } + ::v-deep .el-form{ + padding-left: .1rem !important; + } + ::v-deep .el-form-item__error{ + font-size: .13rem !important; + } + ::v-deep .el-input__inner{ + height: .35rem !important; + font-size: .14rem; + } + ::v-deep .el-form-item__label { + display: flex; + align-items: center; + justify-content: flex-end; + margin-right: .2rem !important; + width: .7rem; + } + + + .secretary li{ + width: 1.3rem !important; + height: 4rem !important; + span{ + width: .5rem !important; + height: 70% !important; + font-size: 0.25rem !important; + } + } + .hua { + height: 5rem !important; + } + .LoginTop{ + margin-bottom: .4rem !important; + } + .yzm{ + top: 15% !important; + } + .fff{ + width: 2.4rem !important; + height: 4rem !important; + } + .rrr{ + width: 2rem !important; + } + .btn{ + margin-bottom: .1rem !important; + } + .btn ::v-deep .el-button { + margin-top: 0.2rem !important; + font-size: 0.2rem !important; + width: 100%; + padding: 0.12rem !important; + span{ + font-weight: bold !important; + } + } + .asdf{ + margin-bottom: .1rem !important; + } +} +@media screen and (min-width:1366px) and (max-width:1920px){ + .Ttop{ + margin-bottom: .6rem !important; + } + ::v-deep .uni-input-placeholder{ + font-size: .14rem; + height: 100%; + display: flex; + align-content: center; + align-items: center; + } + .secretary li{ + width: 1.3rem !important; + height: 4rem !important; + span{ + width: .5rem !important; + height: 70% !important; + font-size: 0.25rem !important; + } + } + /* 楂樼骇鎼滅储 */ + .Search ::v-deep .flex-center{ + height: 80% !important; + } + ::v-deep .searchBg{ + width: .35rem; + height: .35rem; + margin-right: .03rem; + } + + .fff{ + width: 2.4rem !important; + height: 4rem !important; + } + .rrr{ + width: 2rem !important; + } + .hua { + height: 4rem !important; + } +} + + .btn>>>.el-form-item__content { margin-left: 0 !important; @@ -324,11 +475,11 @@ } .login { - width: 102rpx; - height: 102rpx; + width: .52rem; + height: .52rem; display: inline-block; vertical-align: middle; - margin-right: 20rpx; + margin-right: .2rem; background: url(@/static/image/logo.png) no-repeat 0 0; background-size: 100% 100%; } diff --git a/pages/interchannel/interchannel.vue b/pages/interchannel/interchannel.vue index 66b7549..d0cb231 100644 --- a/pages/interchannel/interchannel.vue +++ b/pages/interchannel/interchannel.vue @@ -1,24 +1,17 @@ <template> <view class="bag "> - <view class="NavTop flex"> - <view class=""><img src="../../static/涓尰浜虹墿鐭ヨ瘑搴�0201/涓夋潯鏉�.png" alt="" /></view> - <view class="">鍘嗕唬瀛︽湳娴佹淳</view> - <view class="NavTopr"> - <img src="../../static/涓尰浜虹墿鐭ヨ瘑搴�0201/涓夋潯鏉�.png" alt="" /> - <img src="../../static/涓尰浜虹墿鐭ヨ瘑搴�0201/涓夋潯鏉�.png" alt="" /> - <img src="../../static/涓尰浜虹墿鐭ヨ瘑搴�0201/涓夋潯鏉�.png" alt="" /> - </view> - </view> + <!-- 椤堕儴瀵艰埅 --> + <headNav :idIndex="idIndex" text="鍘嗕唬瀛︽湳娴佹淳"/> <view class="Midde flex"> - <view class="MiddeBack">杩斿洖</view> + <!-- <view class="MiddeBack">杩斿洖</view> --> + <el-button class="MiddeBack flex flex-center" @click="goBack">杩斿洖</el-button> <view class="flex flex-center flex-column"> - <view class="" style="font-weight: 900;margin-bottom:20rpx ;">娌抽棿鍥捐氨</view> + <view class="" style="font-weight: 900;margin-bottom:.2rem ;font-size: .26rem;line-height: 1;">娌抽棿鍥捐氨 + </view> <ul class="flex Lists"> - <li v-for="item in secretary " - :style="{background:item.istrue?'#5879a4':'#e5ecf4',color:item.istrue?'#fff':'#889fbd'}" - class="flex" @click="ListClick(item.id)"> - {{item.name}} - </li> + <li style="background-color: #597AA5;color: #fff;">瀛︽淳浠嬬粛</li> + <!-- /pages/AcademicHistory/AcademicHistory --> + <li @click="ListClick" style="background-color: #fff;color: #597AA5;" >瀛︽淳鍥捐氨</li> </ul> </view> <view class=""></view> @@ -37,18 +30,19 @@ <li>瀛︽湳鐗圭偣:-</li> <li>鏉ユ簮:浠诲簲绉嬶紝涓尰鍚勫瀛﹁|M).涓婃捣:涓婃捣绉戝鎶�鏈嚭鐗堢ぞ锛�1986</li> </ul> - </view> + </view> </view> <view class="Bottom_Bot" style="color: #d1d1d1 ;"> <view class=""> <!-- <csr-tab :tabList="tabList" :value="0"></csr-tab> --> - <csr-tab :value.sync="swiperIndex" :tabList="tabSwiperList"></csr-tab> + <view class="flex flex-center csrTab1"> + <csr-tab class="csrTab" :value.sync="swiperIndex" :tabList="tabSwiperList"></csr-tab> + </view> <swiper :current="swiperIndex" duration="300" :circular="true" indicator-color="rgba(255,255,255,0)" indicator-active-color="rgba(255,255,255,0)" class="Swiper"> <!-- @change="swiperChange" --> - <swiper-item v-for="(swiper,index) in tabSwiperList" :key="index"> - <view class="swiperList" - style="background-color: #FFFFFF;text-align: left;color: #000;"> + <swiper-item v-for="(swiper,index) in tabSwiperList" :key="index"> + <view class="swiperList" style="background-color: #FFFFFF;text-align: left;color: #000;"> {{swiper.content}} </view> </swiper-item> @@ -65,6 +59,8 @@ export default { data() { return { + // 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ + idIndex:0, swiperIndex: 0, tabSwiperList: [{ TabControl: `鏍囬1`, @@ -90,14 +86,6 @@ id: 2, name: '骞呭害s钀ㄨ姮', istrue: false - }, { - id: 3, - name: '骞呭害s钀ㄨ姮', - istrue: false - }, { - id: 4, - name: '骞呭害s钀ㄨ姮', - istrue: false }], tabList: [{ name: '澹ぇ澶�', @@ -108,9 +96,22 @@ }, ] } }, - methods: { + onLoad(options) { + this.idIndex = options.id + console.log('optionsoptionsoptions',options.id); + }, + methods: { // 杩斿洖涓婁竴椤� + goBack() { + // uuni.redirectTo(); + uni.redirectTo({ + url: '/pages/index/index' + }) + }, ListClick(event) { console.log(event); + uni.navigateTo({ + url: '/pages/AcademicHistory/AcademicHistory?id='+this.idIndex + }) this.secretary.forEach(item => { if (item.id === event) { item.istrue = true; @@ -128,6 +129,9 @@ </script> <style scoped> + * { + box-sizing: border-box; + } view { color: #fff; @@ -156,39 +160,69 @@ } .Midde { - background-color: #d1d6dc; + /* background-color: #d1d6dc; */ + background-image: url(@/static/image/瀛︽淳Bg.png); + background-size: 100% 100%; color: #000; - padding: 40rpx; + padding: .18rem .23rem 0; align-items: flex-start; + height: 1.43rem; view { color: #000; } + .MiddeBack { + width: 0.6rem; + height: 0.24rem; + font-size: .12rem; + padding: 0; + + } + .Lists { li { - background-color: #e4ebf3; + /* background-color: #e4ebf3; border: 1rpx solid #5778a2; padding: 5rpx 10rpx; - font-size: 18rpx; + font-size: 18rpx; */ + width: 0.96rem; + height: .3rem; + border: 1px solid #597AA5; + line-height: .3rem; + text-align: center; + font-size: .14rem; } } } .Bottom { - padding: 40rpx; + padding: .39rem 1.21rem !important; .Bottom_top { justify-content: flex-start; - align-items: flex-end; + /* align-items: flex-end; */ + align-items: flex-start; + padding: 0 1.59rem; + + .BBimage { + width: 4.05rem; + height: 1.93rem; + margin-right: .49rem; + } .author { color: #000; - padding-left: 100rpx; + /* padding-left: 100rpx; */ li { - padding: 5rpx 0; + /* padding: 5rpx 0; + */ + line-height: .22rem; + font-size: .14rem; + margin-top: .05rem; + color: #2C2C2C; } } } @@ -207,10 +241,63 @@ } - .Swiper {} + .Bottom_Bot { + margin-top: .39rem; + } + + .csrTab1 { + border-bottom: 2px solid #9E9E9E; + margin-bottom: .3rem; + } + + .csrTab { + width: 40%; + height: .4rem; + /* line-height: .3rem; */ + font-size: .14rem; + display: flex; + + } + + .Swiper { + padding: 0 1.25rem; + height: 2rem; + + } + + .csrTab ::v-deep .uni-tab-bar { + border: 0 !important; + height: .02rem; + background-color:#597AA5; + } + + .csrTab ::v-deep .uni-tab-item { + color: #9E9E9E !important; + font-weight: 700; + height: .4rem; + } + + .csrTab ::v-deep .uni-tab-active { + color: #597AA5 !important; + } .swiperList { - /* flex: 1; */ - /* min-height: 500rpx; */ + line-height: .28rem; + font-size: .14rem; + color: #2C2C2C; + } +@media screen and (min-width:2560px)and (max-width:3840px){ + /* .csrTab ::v-deep .uni-tab-bar { + border: 0.015rem solid #597AA5 !important; + } */ +} + + @media screen and (min-width:1366px) and (max-width:1920px){ + /* .csrTab ::v-deep .uni-tab-bar { + border: 0 !important; + height: .02rem; + background-color:#597AA5; + + } */ } </style> \ No newline at end of file diff --git a/pages/knowledgeBase/knowledgeBase.vue b/pages/knowledgeBase/knowledgeBase.vue index 959e3e1..01e0c17 100644 --- a/pages/knowledgeBase/knowledgeBase.vue +++ b/pages/knowledgeBase/knowledgeBase.vue @@ -1,15 +1,15 @@ <template> <view> <!-- 椤堕儴 --> - <headNav /> + <headNav text="涓浗鍖诲浜虹墿鐭ヨ瘑搴�"/> <!-- 鎼滅储 --> - <view class="flex flex-center" style="margin: 20rpx 0;"> - <luanqing-search class="search_bar" @onSearch="onSearch"></luanqing-search> - <view class="" @click="isAvancedClick" - style="color:#244A7B ;font-size: 20rpx;margin-left: 60rpx;cursor: pointer;">楂樼骇鎼滅储 锕�</view> + <view class="flex flex-center Search"> + <!-- <luanqing-search class="search_bar" @onSearch="onSearch"></luanqing-search> --> + <advancedSearch @onSearch="onSearch" placehold="杈撳叆濮撳悕/鍒悕/鏃舵湡/浼犱富鑱屼笟鎼滅储" :isAvancedTrue="false" /> + <view class="advancedSea" @click="isAvancedClick" style="color:#244A7B ;cursor: pointer;">楂樼骇鎼滅储 锕�</view> </view> <!-- 鐑棬鎼滅储 --> - <view class="flex flex-center" style="font-size: 20rpx;margin: 10rpx 0;"> + <view class="flex flex-center hotSearch" style="font-size: 20rpx;margin: 10rpx 0;"> 鐑棬鎼滅储锛� <ul class="flex" style="margin-right: 10rpx;"> <!-- @@ -17,23 +17,23 @@ :style="{color:item.bgColor==true?'#5879a4':'#000'}"> {{item.name}} </li>--> - <li v-for="item in hot" :key="item.id" style="margin: 0 10rpx;color: #5879a4;font-size: 20rpx;"> + <li v-for="item in hot" :key="item.id" style="color: #5879a4;"> {{item.name}} </li> </ul> </view> <!-- 楂樼骇鎼滅储 --> - <view class="" v-if="isAdvancedSearch" style="padding: 0 230rpx; margin-bottom: 10rpx;"> - <view style="background-color: #fff;padding: 20rpx;" class=""> + <view class="advancedSeaTrue" v-if="isAdvancedSearch" style="padding: 0 230rpx; margin-bottom: 10rpx;"> + <view style="background-color: #fff;padding: 20rpx;" class="advancedSeaTrue1"> <h3>楂樼骇鎼滅储</h3> <MyForm @submit="onSubmit" :from="from" /> </view> </view> - <uni-row class="demo-uni-row flex flex-items-start" style="padding: 0 230rpx; "> + <uni-row class="demo-uni-row zhushuju flex flex-items-start" style="padding: 0 230rpx; "> <uni-col :span="5" class="fbox"> <!-- 鑱屼笟 --> - <view class="demo-uni-col dark box" - style="margin-bottom: 40rpx;background-color: #fff; padding: 20rpx;border: 2rpx solid #e0e0e0;"> + <view class="demo-uni-col zhiye dark box boox" + style="margin-bottom: 40rpx;background-color: #fff; border: 2rpx solid #e0e0e0;"> <h3>{{profession.title}}</h3> <ul style="margin-top: 10rpx;" :class="{ 'a': activeBox === 'a'?'a':'' }"> <!-- background-color: #d6e3f4;border-radius: 60rpx; --> @@ -44,15 +44,16 @@ <view class="">{{item.number}}</view> </li> </ul> - <view class="flex flex-center"> - <view class="toggleButton" style="font-size: 25rpx;color: #C1D3EA;" @click="shrinkClick('a')"> + <view class="flex flex-center toggleButton1"> + <view class="toggleButton" style="color: #C1D3EA;" @click="shrinkClick('a')"> {{ activeBox !== 'a' ? '鏇村 锕�' : '鏀惰捣 锔�' }} </view> </view> </view> <!-- 涓栦唬 --> - <view class="demo-uni-col dark box" - style="background-color: #fff;padding: 20rpx;border: 2rpx solid #e0e0e0;" :style="{'marginBottom': isAdvancedSearch ===true ? '0': '40rpx'}"> + <view class="demo-uni-col dark box boox zhongjianleft" + style="background-color: #fff;border: 2rpx solid #e0e0e0;" + :style="{'marginBottom': isAdvancedSearch ===true ? '0': '40rpx'}"> <h3>{{dynasty.title}}</h3> <ul style="margin-top: 10rpx;" :class="{ 'b': activeBox === 'b'?'b':'' }"> <!-- background-color: #d6e3f4;border-radius: 60rpx; --> @@ -63,20 +64,20 @@ <view class="">{{item.number}}</view> </li> </ul> - <view class="flex flex-center"> - <view class="toggleButton" style="font-size: 25rpx;color: #C1D3EA;" @click="shrinkClick('b')"> + <view class="flex flex-center toggleButton1"> + <view class="toggleButton" style="color: #C1D3EA;" @click="shrinkClick('b')"> {{ activeBox !== 'b' ? '鏇村 锕�' : '鏀惰捣 锔�' }} </view> </view> </view> <!-- 鏉ユ簮 --> - <view v-if="!isAdvancedSearch" class="demo-uni-col dark box" - style="height: 250rpx;background-color: #fff;padding: 20rpx;border: 2rpx solid #e0e0e0;"> + <view v-if="!isAdvancedSearch" class="demo-uni-col dark box boox" + style="height: 250rpx;background-color: #fff;border: 2rpx solid #e0e0e0;"> <h3>{{source.title}}</h3> - <ul style="margin-top: 10rpx;" :class="{ 'b': activeBox === 'b'?'b':'' }"> + <ul class="laiyuan" style="margin-top: 10rpx;" :class="{ 'b': activeBox === 'b'?'b':'' }"> <!-- background-color: #d6e3f4;border-radius: 60rpx; --> - <li class="flex" v-for="(item,index) in source.list" :key="index" - style="padding:0 20rpx;color: #244A7B;font-size: 24rpx;"> + <li class="flex liClick" v-for="(item,index) in source.list" :key="index" + style="padding:0 20rpx;color: #244A7B;"> <view class="">{{ index+1 + '. ' +item.name}}</view> <view class="">{{item.number}}</view> </li> @@ -87,21 +88,21 @@ </view> --> </view> </uni-col> - <uni-col :span="19" style="padding-left: 20rpx; "> + <uni-col :span="19" class="rightList"> <view class="demo-uni-col light fbox1" style=" background-color: #fff;border: 1px solid #e0e0e0;padding: 10rpx 20rpx;"> - <view class="flex" style="margin:10rpx 0"> + <view class="flex lightTop" style="margin:10rpx 0"> <view class="" style="color: #2C2C2C;">鍏�1374鏉�</view> - <el-button size="mini">涓嬭浇</el-button> + <el-button>涓嬭浇</el-button> </view> - <el-table :data="tableData" size="mini" style="width: 100%"> - <el-table-column prop="serialNumber" label="搴忓彿" width="70"></el-table-column> + <el-table :data="tableData" class="lightBo" style="width: 100%"> + <el-table-column prop="serialNumber" label="搴忓彿" width="110"></el-table-column> <el-table-column prop="name" label="濮撳悕"></el-table-column> <el-table-column prop="another" label="鍒悕"></el-table-column> - <el-table-column prop="gender" label="鎬у埆"></el-table-column> - <el-table-column prop="epoch" label="鏃朵唬"></el-table-column> - <el-table-column prop="year" label="鐢熷勾" width="70"></el-table-column> - <el-table-column prop="death" label="鍗掑勾" width="70"></el-table-column> + <el-table-column prop="gender" label="鎬у埆" width="70"></el-table-column> + <el-table-column prop="epoch" label="鏃舵湡"></el-table-column> + <el-table-column prop="year" label="鐢熷勾" width="130"></el-table-column> + <el-table-column prop="death" label="鍗掑勾" width="130"></el-table-column> <el-table-column prop="nativePlace" label="绫嶈疮"></el-table-column> <el-table-column prop="socialIdentity" label="绀句細韬唤"></el-table-column> <el-table-column prop="officialPosition" label="瀹樿亴"></el-table-column> @@ -109,6 +110,7 @@ </view> </uni-col> </uni-row> + <div class="abox"></div> <Footer1 /> </view> </template> @@ -134,6 +136,39 @@ value: '' }, { + type: 'input', + label: '鍒悕', + name: 'alias', + value: '' + }, + { + type: 'input', + label: '绫嶈疮', + name: 'nativePlace', + value: '' + }, + { + type: 'select', + label: '鑱屼笟', + value: '', + name: 'occupation', + options: [{ + label: '鍖诲', + value: '1' + }, + { + label: '涓栧', + value: '2' + } + ] + }, + { + type: 'input', + label: '鑱屽畼', + name: 'officials', + value: '' + }, + { type: 'select', label: '鎬у埆', value: '', @@ -150,34 +185,15 @@ }, { type: 'input', - label: '鑱旂郴', - name: 'phone', + label: '鏃舵湡', + name: 'time', value: '' }, { type: 'input', - label: '璇佷欢', - name: 'idNumber', + label: '鏈烘瀯', + name: 'institution', value: '' - }, - { - type: 'select', - label: '鐘舵��', - name: 'state', - value: '', - options: [{ - label: '鏈敵璇�', - value: '鏈敵璇�' - }, - { - label: '宸茬敵璇�', - value: '宸茬敵璇�' - }, - { - label: '宸插垹闄�', - value: '宸插垹闄�' - } - ] } ] }, @@ -223,7 +239,7 @@ activeBox: null, // 涓栦唬 dynasty: { - title: '涓栦唬', + title: '鏃舵湡', index: 0, list: [{ name: '鍏ㄩ儴', @@ -348,12 +364,403 @@ </script> <style> + .abox{ + height: 1rem; + } + @media screen and (min-width:2560px)and (max-width:3840px) { + + /* 鎼滅储 */ + .Search { + margin: .35rem 0 .16rem !important; + font-size: .12rem !important; + } + + .Search ::v-deep .advancedSea { + font-size: .12rem !important; + margin-left: .35rem; + } + + .Search ::v-deep .flex-center { + height: 80% !important; + } + + .hotSearch { + font-size: .12rem !important; + margin-bottom: .19rem !important; + + li { + font-size: .12rem !important; + margin: 0 .1rem; + } + } + + .advancedSeaTrue, + .zhushuju { + padding: 0 1.24rem !important; + } + + .advancedSeaTrue1 { + padding: .08rem .19rem !important; + font-size: .14rem !important; + } + + /* Form缁勪欢閲岄潰鐨勬牱寮� */ + ::v-deep .el-row { + display: flex; + flex-wrap: wrap; + margin-top: .1rem !important; + } + + ::v-deep .el-form-item { + display: flex !important; + flex-wrap: wrap !important; + margin-bottom: .18rem !important; + } + + ::v-deep .el-form-item__label { + font-size: .14rem !important; + height: .3rem !important; + display: flex !important; + align-items: center !important; + } + + ::v-deep .el-input__inner { + font-size: .14rem !important; + height: .3rem !important; + } + + ::v-deep .Formbtn { + width: 100% !important; + display: flex; + justify-content: center; + align-items: center; + + .el-button { + width: .7rem !important; + height: .3rem !important; + font-size: .12rem; + + } + } + + /* 鈥斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�� */ + /* 宸﹁竟鐨� */ + .boox { + padding: .1rem .09rem; + min-height: 2rem !important; + position: relative; + + ul { + margin-top: .16rem !important; + } + + h3 { + font-size: .14rem; + margin-left: .1rem; + } + + li { + height: .3rem; + line-height: .3rem; + padding: 0 .2rem !important; + margin: .05rem 0 !important; + border-radius: .3rem !important; + + } + + .toggleButton1 { + position: absolute; + bottom: .1rem !important; + left: 40% !important; + } + + .toggleButton { + font-size: .14rem !important; + } + } + + .zhongjianleft { + margin: .27rem 0 !important; + } + + .laiyuan { + min-height: 2rem !important; + } + + /* 鈥斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�� */ + ::v-deep .uni-input-placeholder { + font-size: .14rem; + height: 100%; + display: flex; + align-content: center; + align-items: center; + } + + ::v-deep .ffff { + border-radius: .3rem !important; + height: .36rem !important; + } + + ::v-deep .widget_button { + border-radius: inherit !important; + margin-right: .02rem !important; + background-color: #597AA5; + } + + + + /* 鍙充晶 */ + .rightList { + padding-left: .2rem !important; + + .light { + padding: .1rem .2rem !important; + } + + .lightTop { + font-size: .14rem !important; + } + + .el-button { + font-size: .12rem !important; + padding: .05rem .18rem !important; + } + + .lightBo { + font-size: .14rem !important; + + .is-leaf { + background-color: #C1D3EA !important; + color: #2C2C2C !important; + font-weight: 400; + .cell{ + + height: .3rem !important; + line-height: .3rem !important; + } + } + } + + .el-table__body-wrapper { + .el-table__row { + height: .46rem !important; + line-height: .46rem !important; + .cell{ + + height: .3rem !important; + line-height: .3rem !important; + } + } + + } + } + } + + @media screen and (min-width:1366px) and (max-width:1920px) { + + /* 鎼滅储 */ + .Search { + margin: .35rem 0 .16rem !important; + font-size: .12rem !important; + } + + .Search ::v-deep .advancedSea { + font-size: .12rem !important; + margin-left: .35rem; + } + + .Search ::v-deep .flex-center { + height: 80% !important; + } + + .hotSearch { + font-size: .12rem !important; + margin-bottom: .19rem !important; + + li { + font-size: .12rem !important; + margin: 0 .1rem; + } + } + + .advancedSeaTrue, + .zhushuju { + padding: 0 1.24rem !important; + } + + .advancedSeaTrue1 { + padding: .08rem .19rem !important; + font-size: .14rem !important; + } + + /* Form缁勪欢閲岄潰鐨勬牱寮� */ + ::v-deep .el-row { + display: flex; + flex-wrap: wrap; + margin-top: .1rem !important; + } + + ::v-deep .el-form-item { + display: flex !important; + flex-wrap: wrap !important; + margin-bottom: .18rem !important; + } + + ::v-deep .el-form-item__label { + font-size: .14rem !important; + height: .3rem !important; + display: flex !important; + align-items: center !important; + } + + ::v-deep .el-input__inner { + font-size: .14rem !important; + height: .3rem !important; + } + + ::v-deep .Formbtn { + width: 100% !important; + display: flex; + justify-content: center; + align-items: center; + + .el-button { + width: .7rem !important; + height: .3rem !important; + font-size: .12rem; + + } + } + + /* 鈥斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�� */ + /* 宸﹁竟鐨� */ + .boox { + padding: .1rem .09rem; + min-height: 2rem !important; + position: relative; + + ul { + margin-top: .16rem !important; + margin-bottom: .2rem !important; + } + + h3 { + font-size: .14rem; + margin-left: .1rem; + } + + li { + height: .3rem; + line-height: .3rem; + padding: 0 .2rem !important; + margin: .05rem 0 !important; + border-radius: .3rem !important; + + } + + .toggleButton1 { + position: absolute; + bottom: .1rem !important; + left: 40% !important; + } + + .toggleButton { + font-size: .14rem !important; + } + } + + .zhongjianleft { + margin: .27rem 0 !important; + } + + .laiyuan { + min-height: 2rem !important; + } + + /* 鈥斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�斺�� */ + ::v-deep .uni-input-placeholder { + font-size: .14rem; + height: 100%; + display: flex; + align-content: center; + align-items: center; + } + + ::v-deep .ffff { + border-radius: .3rem !important; + height: .36rem !important; + } + + ::v-deep .widget_button { + border-radius: inherit !important; + margin-right: .02rem !important; + background-color: #597AA5; + } + + /* -------------------- */ +/* 鍙充晶 */ + .rightList { + padding-left: .2rem !important; + + .light { + padding: .1rem .2rem !important; + } + + .lightTop { + font-size: .14rem !important; + } + + .el-button { + font-size: .12rem !important; + padding: .05rem .18rem !important; + } + + .lightBo { + font-size: .14rem !important; + + .is-leaf { + background-color: #C1D3EA !important; + color: #2C2C2C !important; + font-weight: 400; + .cell{ + + height: .3rem !important; + line-height: .3rem !important; + } + } + } + + .el-table__body-wrapper { + .el-table__row { + height: .46rem !important; + line-height: .46rem !important; + .cell{ + + height: .3rem !important; + line-height: .3rem !important; + } + } + + } + } + } + * { box-sizing: border-box; } + .hotSearch { + font-size: .12rem; + margin-bottom: .19rem; + + li { + font-size: .12rem; + margin: 0 .1rem; + } + } + .a { - height: 200px; + height: 2rem; } .b { @@ -368,6 +775,14 @@ } + .boox { + padding: .1rem .09rem; + + h3 { + font-size: .14rem; + } + } + ::v-deep .el-table th, ::v-deep .el-table td { text-align: center; diff --git a/pages/repository/repository.vue b/pages/repository/repository.vue index 8ec7fa5..b884d33 100644 --- a/pages/repository/repository.vue +++ b/pages/repository/repository.vue @@ -1,8 +1,8 @@ <template> <view class="relative"> - <headNav /> + <headNav :idIndex="idIndex" text="涓尰浜虹墿鏁版嵁搴�" /> <view class="Midde flex"> - <el-button class="MiddeBack" size="mini" @click="goBack">杩斿洖</el-button> + <el-button class="MiddeBack flex flex-center" @click="goBack">杩斿洖</el-button> <view style="width: 70%;" class="flex flex-center flex-column"> <view class="" style="font-weight: bold;font-size: .20rem;">鏉庢椂鐝�</view> <ul class="flex" style="line-height: 1.2;margin: .15rem 0 ;"> @@ -18,30 +18,35 @@ <view class="flex" style="width: 100%;margin: .25rem 0 .15rem 0;"> <view class=""> <!-- <el-button style="padding: 10rpx;" size="mini" icon="el-icon-folder-add">鏀惰棌</el-button> --> - <el-button style="padding: .05rem .085rem;" size="mini" icon="el-icon-set-up">寮曠敤</el-button> + <el-button style="padding: .05rem .085rem;" class="yinyong flex"> + <img src="@/static/image/yinyong.png" alt="" />寮曠敤</el-button> </view> - <view class="" style="font-size: .12rem;color: #244A7B;">闃呰鏇村></view> + <view class="" style="font-size: .12rem;color: #244A7B;" @click="ProfileClick">闃呰鏇村></view> </view> </view> <view class="" style="width: 5%;"></view> </view> <el-row style="padding: 0 1.2rem 0;padding-top: .24rem;"> <!-- 宸︿晶 --> - <el-col :span="5" style="padding-right: .2rem;width: 2.8rem;"> + <el-col :span="5" class="BoxLeft" style="padding-right: .2rem;width: 2.8rem;"> <div class="grid-content bg-purple-dark flex flex-column"> <el-card class="box-card" style="width: 100%;height: 2.06rem;"> - <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;"> - <span style="margin-left: .12rem;">鍏崇郴鍥捐氨</span> - <el-button icon="el-icon-rank" style="float: right; padding: 3px 0" type="text"></el-button> + <div class="clearfix flex" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;"> + <span style="margin-left: .12rem;font-size: .14rem;font-weight: 900;">鍏崇郴鍥捐氨</span> + <!-- <el-button icon="el-icon-rank" style="float: right; padding: 3px 0;" type="text"></el-button> --> + <img src="@/static/image/fangda.png" @click="fangdaClick(1)" + style="width: .18rem;height: .18rem;" alt="" /> </div> <view id="relation" style="height: 1.51rem;width: 100%;"></view> </el-card> <el-card class="box-card" style="width: 100%;height: 2.06rem; margin: .26rem 0;"> - <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;"> + <div class="clearfix flex" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;"> <span>鏃剁┖鍦伴搧</span> - <el-button icon="el-icon-rank" style="float: right; padding: 3px 0" type="text"></el-button> + <!-- <el-button icon="el-icon-rank" style="float: right; padding: 3px 0" type="text"></el-button> --> + <img src="@/static/image/fangda.png" @click="fangdaClick(2)" + style="width: .18rem;height: .18rem;" alt="" /> </div> - <view id="spaceTime" style="height: 300rpx;width: 100%;position: relative;"></view> + <view id="spaceTime" style="height: 1.51rem;width: 100%;position: relative;"></view> </el-card> <el-card style="width: 100%;height: 2.06rem;"> <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;"> @@ -64,7 +69,7 @@ <!-- 鍩虹淇℃伅 --> <cc-defineTable :tableData="tableArr"></cc-defineTable> </el-card> - <el-card class="box-card" style=" min-height: 1.91rem; margin: 20rpx 0;"> + <el-card class="box-card" style=" min-height: 1.91rem; margin: .2rem 0;"> <el-tabs ref="tabs" v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="浠h〃钁椾綔" data-id="1" name="representative"> <Table1 :data="tableData" :columns="tableColumns" /> @@ -92,7 +97,7 @@ <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;"> <span>鐩稿叧闄勮〃/鍥惧儚</span> </div> - <ul class="font-family" style="font-size: .12rem;line-height: 2;"> + <ul class="font-family" style="font-size: .13rem;line-height: 2;"> <li> [1|鍒樼倻,璋㈣搲,寮犵,绛�.鍚戜汉鏂囩爺绌剁殑鍥藉鏁版嵁鍩虹璁炬柦寤鸿[J|.涓浗鍥句功棣嗗鎶�,2016,42(5):29-39. </li> @@ -119,8 +124,9 @@ <view class="ProfileNav flex flex-center"> 涓汉灏忎紶 </view> - <view class="" style="padding: .44rem .3rem;min-height: 7.32rem;" > - <view class="" style="margin-bottom: .2rem; background-color: #F0F0F0;padding: .18rem .1rem .1rem .27rem;font-size: .12rem;line-height: .24rem;font-weight: 400;"> + <view class="" style="padding: .44rem .3rem;min-height: 7.32rem;"> + <view class="" + style="margin-bottom: .2rem; background-color: #F0F0F0;padding: .18rem .1rem .1rem .27rem;font-size: .12rem;line-height: .24rem;font-weight: 400;"> <view class="" style="color: #2C2C2C;"> 钑欏睍涓佷笐鍚岄噷鏃ュ博棰濆簭鍏堣�冩湀姹犵縼钁椼�婂洓褰吀鏄庛�嬪叓鍗凤紝鐨嗙簿鎸囧ゥ瀹わ紝鑼傜妧鏈兘鐤�狅紝鐝嶅洜鎾补鎯宠彍锛屽兊鎾版鍞愶紝浠ヤ究鏅虹潧锛屾湇鎸囧崡銆備笘涔嬮浄鐥呴洦瀹讹紝鍜镐互鏈嶇剦棣栧姟锛屼笉鐭ユ淳涔冨洓鑳戒箣鏈紝璋撲箣宸ц�呴洦銆備笂澹鑸嶅叾鍏紝闈炲洓涓嶅彲銆� </view> @@ -135,8 +141,9 @@ <!-- 杩斿洖椤堕儴 --> - <el-col style="position: absolute;bottom: 1.44rem;left:1.20rem ;"> - <el-button icon="el-icon-download" circle @click="scrollToTop"></el-button> + <el-col style="position: absolute;bottom: 1rem;left:1.2rem ;"> + <el-button style="width: .4935rem;height: .4935rem;font-size: .3rem;" icon="el-icon-download" circle + @click="scrollToTop"></el-button> </el-col> </view> </template> @@ -154,7 +161,11 @@ }, data() { return { - isProfile: true, + // 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ + idIndex: 0, + // ------- + // 灏忎紶 + isProfile: false, // 鍏崇郴鍥捐氨 activeName: 'representative', // 鍩虹淇℃伅 @@ -246,6 +257,10 @@ }] } }, + onLoad(options) { + this.idIndex = options.id + console.log('optionsoptionsoptions', options.id); + }, mounted() { // 鍏崇郴鍥捐氨 @@ -257,11 +272,34 @@ this.$nextTick(() => { // 鑾峰彇绗竴涓�夐」鍗$殑 DOM 鍏冪礌 const firstTab = this.$refs.tabs.$el.querySelector('.el-tabs__active-bar'); - firstTab.style.transform = 'translateX(' + '-20px' + ')' + firstTab.style.transform = 'translateX(' + '-.2rem' + ')' console.log(firstTab); }); + + + // 鐩戝惉绐楀彛澶у皬鍙樺寲 + window.addEventListener('resize', this.relation); }, methods: { + // 鏀惧ぇ鍦板浘璺宠浆 + fangdaClick(index) { + console.log(index); + if (index == 1) { + console.log('璺宠浆鍏崇郴鍦板浘'); + uni.navigateTo({ + url: '/pages/characterRelation/characterRelation' + }) + } else if (index == 2) { + uni.navigateTo({ + url: '/pages/characterMap/characterMap' + }) + console.log('璺宠浆鏃剁┖鍦板浘'); + } + }, + // 灏忎紶 + ProfileClick() { + this.isProfile = !this.isProfile + }, // 杩斿洖涓婁竴椤� goBack() { uni.navigateBack(); @@ -277,12 +315,21 @@ handleClick(tab) { let index = tab.$attrs['data-id'] - 1 this.$nextTick(() => { - if (index != 0) { - let firstTab = this.$refs.tabs.$el.querySelector('.el-tabs__active-bar'); - firstTab.style.transform = 'translateX(' + 100 * index + 'px)' + let firstTab = this.$refs.tabs.$el.querySelector('.el-tabs__active-bar'); + if (index == 0) { + console.log('sss'); + firstTab.style.transform = 'translateX(-' + .2 + 'rem)' + } else if (index == 1) { + firstTab.style.transform = 'translateX(' + .85 * index + 'rem)' + } else if (index == 2) { + firstTab.style.transform = 'translateX(' + .93 * index + 'rem)' + } else if (index == 3) { + firstTab.style.transform = 'translateX(' + .95 * index + 'rem)' + } else if (index == 4) { + firstTab.style.transform = 'translateX(' + .97 * index + 'rem)' } else { let firstTab = this.$refs.tabs.$el.querySelector('.el-tabs__active-bar'); - firstTab.style.transform = 'translateX(' + '-20' + 'px)' + firstTab.style.transform = 'translateX(' + '-.2' + 'rem)' } // console.log(firstTab); }) @@ -291,6 +338,7 @@ relation() { var chartDom = document.getElementById('relation'); var myChart = echarts.init(chartDom); + // 鍋囪鎮ㄦ湁鑺傜偣鍚嶇О鍜屽畠浠箣闂寸殑鍏崇郴鏁版嵁 var nodes = ['鏉庢椂鐝�', '鎴愬氨', '浼犳壙', '浜插弸', '钁椾綔']; var relationships = [{ @@ -326,6 +374,23 @@ }); console.log(links); + let FontSize = 12; // 瀛椾綋澶у皬 + let BorderWidth = 2; // 杈规澶у皬 + let SymbolSize = 80; // 灏哄璺濈 + // 涓嶅悓灏哄涓嬩慨鏀筫charts鐨勫瓧浣� + if (window.innerWidth > 2560 && window.innerWidth <= 3840) { + FontSize = 28 + BorderWidth = 5 + SymbolSize = 100 + } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) { + FontSize = 28 + BorderWidth = 4 + SymbolSize = 90 + } else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) { + FontSize = 18 + BorderWidth = 4 + SymbolSize = 70 + } // 鏍规嵁nodes鍔ㄦ�佺敓鎴愯妭鐐规暟鎹� var nodeData = nodes.map(function(node, index) { return { @@ -333,7 +398,9 @@ x: Math.random() * 1000, // 璁剧疆闅忔満x鍧愭爣浣嶇疆 y: Math.random() * 600, // 璁剧疆闅忔満y鍧愭爣浣嶇疆 itemStyle: { - color: getColorByIndex(index) // 鍙互鏍规嵁绱㈠紩璁剧疆涓嶅悓鐨勯鑹� + color: getColorByIndex(index), // 鍙互鏍规嵁绱㈠紩璁剧疆涓嶅悓鐨勯鑹� + borderWidth: BorderWidth, + borderColor: getColorByIndex(index + 1), } }; }); @@ -342,6 +409,7 @@ var colors = ['#ecf4ff', '#dd9795', '#f1edbe', '#ecf4ff', '#c5dbd8']; // 鍙互鏍规嵁瀹為檯鎯呭喌璁剧疆棰滆壊鏁扮粍 return colors[index % colors.length]; } + var option; option = { tooltip: {}, @@ -350,15 +418,16 @@ series: [{ type: 'graph', layout: 'none', - symbolSize: 40, // 璋冩暣鑺傜偣澶у皬 + symbolSize: SymbolSize, // 璋冩暣鑺傜偣澶у皬 label: { show: true, - color: 'black' // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹� + color: 'black', // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹� + fontSize: FontSize, // 璁剧疆鏂囧瓧澶у皬 }, edgeSymbol: ['circle'], edgeSymbolSize: [4, 10], edgeLabel: { - fontSize: 20 + fontSize: 40 }, data: nodeData, links: [{ @@ -626,6 +695,35 @@ </script> <style> + /* Table1琛ㄦ牸閲岄潰鐨勬暟鎹� */ + ::v-deep .is-leaf { + .cell { + font-size: .14rem !important; + height: .4rem !important; + line-height: .4rem !important; + } + } + + ::v-deep .el-table__body { + .cell { + font-size: .14rem !important; + height: .4rem !important; + line-height: .4rem !important; + } + } + + /* --------------- */ + @media screen and (min-width:2560px)and (max-width:3840px) {} + + .BoxLeft ::v-deep.el-card__body { + padding: .1rem .11rem !important; + } + + ::v-deep .el-tabs__content { + line-height: 1; + } + + /* 涓汉灏忎紶 ------------------*/ ::v-deep .el-dialog__header { display: none; @@ -634,7 +732,8 @@ ::v-deep .el-dialog__body { padding: 0; } - ::v-deep .el-dialog__wrapper{ + + ::v-deep .el-dialog__wrapper { z-index: 999999999999999 !important; } @@ -690,10 +789,9 @@ .Midde { background-color: #dbeafd; color: #000; - /* padding: 5rpx 40rpx 0; */ - padding: .24rem .18rem; align-items: flex-start; - + padding: .18rem .24rem ; + view { color: #000; } @@ -701,9 +799,26 @@ .MiddeBack { width: 0.6rem; height: 0.24rem; + font-size: .12rem; + padding: 0; + border: 1px solid #9E9E9E; } } + .yinyong { + font-size: .12rem; + + img { + width: .12rem; + height: .1rem; + vertical-align: top; + margin-right: .03rem; + } + } + + .el-dialog__wrapper { + background: rgba(0, 0, 0, .3); + } .fz { /* line-height: 1.3; @@ -734,7 +849,7 @@ } ::v-deep .el-tabs__nav { - margin-bottom: .2rem !important; + margin-bottom: .1rem !important; } @@ -746,8 +861,8 @@ ::v-deep .el-tabs__item { width: 1rem; font-size: .14rem; - line-height: 40rpx; - height: 40rpx; + line-height: .4rem; + height: .4rem; } ::v-deep .el-tabs__header { @@ -764,7 +879,7 @@ } ::v-deep .el-tabs__active-bar { - top: .3rem !important; + top: .37rem !important; } ::v-deep .el-table::before { @@ -773,6 +888,7 @@ .BoxRight ::v-deep.el-card__body { padding: .2rem .14rem !important; + } .BoxRight .box-card { diff --git a/pages/territory/territory.vue b/pages/territory/territory.vue index b0258f9..817d29e 100644 --- a/pages/territory/territory.vue +++ b/pages/territory/territory.vue @@ -1,8 +1,37 @@ <template> <view> <!-- 椤堕儴瀵艰埅 --> - <headNav /> - <view id="main" style="width: 100vw;height: 1000rpx;position: relative;"></view> + <headNav :idIndex="idIndex" text="涓尰鍦板煙鍖昏氨"/> + <view class="flex flex-center" style="width: 100%; margin: .2rem 0 .34rem;justify-content: flex-start;"> + <advancedSearch class="Search" placehold="杈撳叆濮撳悕/鍒悕/鏈濅唬/浼犱富鑱屼笟鎼滅储" @onSearch="onSearch" :isAvancedTrue="false" /> + <ul class="flex"> + <li style="" v-for="(item,index) in dynasty" :key="item.id"> + <view @click="SchoolClick(item.id)" class="flex flex-center font-family school" + :style="{'marginRight': index === dynasty.length - 1 ? '0' : '0.03rem'}" + style="font-weight: 500; border-radius: .3rem; padding: .06rem .15rem; color: #2C2C2C; font-size: .12rem; margin-top: .03rem;margin-right: .1rem;background-color: #fff;"> + <view class="" :style="{background:item.color}" + style="margin-right: .07rem; width: .12rem;height: .12rem;border-radius: 50%;"></view> + <view class="" style="color: #2C2C2C;font-size: .12rem;">{{item.name}}</view> + </view> + </li> + </ul> + </view> + <view id="main" style="width: 100vw;position: relative;"></view> + <!-- 鏈濅唬 --> + <view class="flex flex-center" style="width: 100%; position: fixed;bottom: .33rem;left: 0;"> + <ul class="flex"> + <li @click="dynastyBottomClick(item.id)" v-for="(item,index) in dynasty1" :key="item.id"> + <view class="flex flex-center" style="height: .35rem; background-color: #fff; color:#244A7B ;"> + {{item.coord}} + </view> + <view class="flex flex-center font-family" + style="padding: .05rem .19rem; height: .3rem;line-height: .3rem; color: #fff; font-size: .14rem; margin-top: .03rem;margin-right: .03rem;background-color: #597AA5;" + :style="{'marginRight': index === dynasty1.length - 1 ? '0' : '0.03rem','background':dynasty1Color==item.id?'#244A7B':'#597AA5'}"> + {{item.name}} + </view> + </li> + </ul> + </view> </view> </template> <!-- <script src="https://api.map.baidu.com/api?v=3.0&ak=5USVDAhhS4ssz44HLq3gNPZai7naXf4Q&callback=initializeMap"></script> --> @@ -16,11 +45,108 @@ export default { data() { return { - - + // 涓嬮潰鐨勬湞浠�1 + dynasty1Color:1, + dynasty1: [{ + name: '澶忔湞', + coord: '2070BC', + id: 1 + }, { + name: '鍟嗘湞', + id: 2, + coord: '1600BC', + }, { + name: '瑗垮懆', + id: 3, + coord: '1600BC' + }, { + name: '鏄ョ鎴樺浗', + id: 4, + coord: '770BC' + }, { + name: '绉︽湞', + id: 5, + coord: '221BC' + }, { + name: '姹夋湞', + id: 6, + coord: '202BC' + }, { + name: '涓夊浗涓ゆ檵鍗楀寳鏈�', + id: 7, + coord: '184' + }, { + name: '闅嬫湞', + id: 8, + coord: '581' + }, { + name: '鍞愭湞', + id: 9, + coord: '618' + }, { + name: '浜斾唬鍗佸浗', + id: 10, + coord: '907' + }, { + name: '杈藉閲�', + id: 11, + coord: '907' + }, { + name: '瀹嬫湞', + id: 12, + coord: '960' + }, { + name: '鍏冩湞', + id: 13, + coord: '1271' + }, { + name: '鏄庢湞', + id: 14, + coord: '1368' + }, { + name: '娓呮湞', + id: 15, + coord: '1636' + }], + // 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ + idIndex: 0, + // 鏈濅唬 + dynasty: [{ + name: '澶忔湞', + color: '#90BBD8', + id: 1 + }, { + name: '鍟嗘湞', + color: '#EDD28B', + id: 2 + }, { + name: '瑗垮懆', + color: '#CF746D', + id: 3 + }, { + name: '绉︽湞', + color: '#9CC27A', + id: 4 + }, { + name: '姹夋湞', + color: '#5B6CB9', + id: 5 + }, { + name: '闅嬫湞', + color: '#8860A8', + id: 6 + }, { + name: '鍞愭湞', + color: '#DE8E66', + id: 7 + }], + } }, - + onLoad(options) { + this.idIndex = options.id + console.log('optionsoptionsoptions', options.id); + }, mounted() { console.log('ss'); // this.$nextTick(() => { @@ -30,6 +156,14 @@ // }) }, methods: { + // 鐐瑰嚮涓嬮潰鐨勬湞浠f寜閽� + dynastyBottomClick(id) { + console.log(id); + this.dynasty1Color= id + }, + onSearch(val) { + console.log(val); + }, innt() { this.$nextTick(() => { @@ -1010,16 +1144,16 @@ // sublink: 'http://www.pm25.in', left: 'center' }, - legend: { - icon: 'image://https://img2.baidu.com/it/u=2771395776,2060749722&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1710694800&t=c85f997454c2a2b3f2e7919ba9c194a3' - }, + // legend: { + // icon: 'image://https://img2.baidu.com/it/u=2771395776,2060749722&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1710694800&t=c85f997454c2a2b3f2e7919ba9c194a3' + // }, // color:['#000'], tooltip: { trigger: 'item' }, bmap: { - center: [104.114129, 37.550339], - zoom: 5, + // center: [104.114129, 37.550339], + zoom: 4, // 杩欓噷鍙互鏍规嵁闇�瑕佽皟鏁寸缉鏀剧骇鍒� roam: true, mapStyle: { styleJson: [{ @@ -1201,7 +1335,7 @@ }) }, - + } } </script> @@ -1211,4 +1345,84 @@ box-sizing: border-box; } + /* 鍦板浘涓婄殑宸︿笅瑙� */ + ::v-deep .anchorBL { + display: none; + } + + @media screen and (min-width:2560px)and (max-width:3840px) { + .Search { + /* width: 30%; */ + justify-content: flex-end; + margin-right: .26rem; + width: 4rem; + } + + .Search ::v-deep .ffff { + width: 3rem; + height: .36rem; + padding: .01rem; + border-radius: .3rem !important; + } + + .Search ::v-deep .widget_button { + width: 1rem; + /* height: .3rem; */ + font-size: .14rem; + padding: 0; + border-radius: .3rem !important; + } + + .Search ::v-deep .widget_style { + display: flex; + justify-content: flex-end; + } + + .Search ::v-deep .uni-input-placeholder { + font-size: .13rem; + /* height: 100%; */ + line-height: 1; + } + + .Search ::v-deep .uni-input-input { + margin-left: .19rem; + } + } + + #main { + height: 6.2rem; + } + + .Search { + /* width: 30%; */ + justify-content: flex-end; + margin-right: .26rem; + width: 4rem; + } + + .Search ::v-deep .ffff { + width: 3rem; + height: .36rem; + padding: .01rem; + } + + .Search ::v-deep .widget_button { + width: 1rem; + /* height: .3rem; */ + font-size: .14rem; + padding: 0; + background-color: #597AA5; + } + + .Search ::v-deep .widget_style { + display: flex; + justify-content: flex-end; + } + + .Search ::v-deep .uni-input-placeholder { + font-size: .13rem; + /* height: 100%; */ + line-height: 1; + margin-left: .19rem; + } </style> \ No newline at end of file diff --git a/pages/zhongyi/zhongyi.vue b/pages/zhongyi/zhongyi.vue index e39dc81..379a75d 100644 --- a/pages/zhongyi/zhongyi.vue +++ b/pages/zhongyi/zhongyi.vue @@ -1,139 +1,647 @@ <template> - <el-container> - <!-- 澶撮儴 --> - <el-header> - <view style=" - display: flex; - height: 50px; - width: 100%; - justify-content: space-between; - align-items: center; - background-color: #C98A49; - "> - <view class="header-one" style="padding-left: 1.5%; "> - <i class="el-icon-s-unfold" style="font-size: 24px;"></i> - </view> - <view class="header-two" style="font-size: 20px; color: aliceblue"> - 涓尰涓栧尰浼犳壙鏁版嵁搴� - </view> - <view class="header-three"> - <view> - <i class="el-icon-search" style="font-size: 24px; "></i> - <i class="el-icon-question" style="font-size: 24px;"></i> - <i class="el-icon-user-solid" style="font-size: 24px;"></i> - </view> - </view> + <view class=""> + <headNav :idIndex="idIndex" :searchBg="false" text="涓尰涓栧尰浼犳壙鏁版嵁搴�" bg="/static/image/topBg1.png" + bg1="/static/image/line1.png" /> + + <view class="flex" style="padding: 0 1.21rem ;"> + <view class="flex"> + <el-button class="MiddeBack flex flex-center" @click="goBack">杩斿洖</el-button> + <h3>閭电櫥鐎�</h3> </view> - <view class="huawenimg"> - </view> - </el-header> - <!-- 涓讳綋閮ㄥ垎 --> - <el-main> - <view style=" - display: flex; - justify-content: center; - border-bottom: 1px solid gray;"> - <view style="display: flex; justify-content: flex-start; margin-right: auto"> - <el-button class="button" @click="hideNodesAndLinks()">杩斿洖</el-button> - </view> - <!-- 娣诲姞涓�涓猣lex瀹瑰櫒鏉ュ寘瑁筫l-menu锛屽苟璁剧疆鍏秄lex灞炴�т互鍗犳嵁鍓╀綑绌洪棿 --> - <view style="display: flex; justify-content: center; flex: 1;"> - <!-- 杩欓噷鏄彍鍗曠殑鍒囨崲 --> - <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" - @select="handleSelect"> - <el-menu-item index="1" class="small-menu-item"> - <router-link to="zhongyione" class="router-link-active"> - 涓栧尰浼犳壙</router-link> - </el-menu-item> - <el-menu-item index="2" class="small-menu-item"> - <router-link to="zhongyitwo" class="router-link-active"> - 涓栧尰鏂囧寲</router-link></el-menu-item> - </el-menu> - </view> - </view> - <router-view> - </router-view> - </el-main> - </el-container> + <ul class="flex Lists"> + <li style="background-color: #597AA5;color: #fff;">涓栧尰浼犳壙</li> + <!-- /pages/AcademicHistory/AcademicHistory --> + <li @click="ListClick" style="background-color: #fff;color: #597AA5;" >涓栧尰浼犳壙</li> + </ul> + <view class="" style="width: 1rem;"></view> + </view> + <!-- echarts鍥� --> + <div class="barChart" ref="barChart"></div> + </view> </template> <script> import * as echarts from "echarts"; export default { data() { return { - activeIndex:1 + // 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ + 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); + + 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], + + 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' + }) + }, } } </script> <style scoped> - .huawenimg { - display: flex; - width: 100%; - height: 20px; - background-image: url('https://img2.baidu.com/it/u=4259428193,1811830338&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1710954000&t=bf5d6b76e71d6e508efef90cf933ea05'); - background-repeat: repeat-x; - /* 姘村钩骞抽摵 */ - background-size: auto 100%; - /* 璁剧疆鑳屾櫙鍥剧墖楂樺害涓庡鍣ㄤ竴鑷达紝瀹藉害鑷�傚簲 */ - border-bottom: 2px solid #C98A49; - /* 璁剧疆姗欒壊鐨勪笅杈规锛屽搴︿负2px */ + .Lists { + li { + /* background-color: #e4ebf3; + border: 1rpx solid #5778a2; + padding: 5rpx 10rpx; + font-size: 18rpx; */ + width: 0.96rem; + height: .3rem; + border: 1px solid #597AA5; + line-height: .3rem; + text-align: center; + font-size: .14rem; + } } - - /* 缁欒繑鍥炴寜閽缃牱寮� */ - .button { - border: none !important; - /* 鍙栨秷杈规 */ - color: #C98A49 !important; - /* 瀛椾綋棰滆壊 */ - background-color: transparent !important; - ; - /* 璁剧疆鑳屾櫙涓洪�忔槑 */ + .MiddeBack { + width: 0.6rem; + height: 0.24rem; + font-size: .12rem; + padding: 0; + } - - .small-menu-item { - border-bottom: 1px solid #EA7A28 !important; - /* 姗欒壊鐨勮竟妗� */ - font-size: 15px !important; - /* 璋冩暣瀛椾綋澶у皬 */ - padding: 0px 5px 0px 0px !important; - /* 璋冩暣鍐呰竟璺� */ - margin: 0px 0px 0px 0px !important; - /* 鍏朵粬浣犳兂瑕佺殑鏍峰紡 */ - } - - /* 璁剧疆el-menu鐨勮儗鏅鑹蹭负閫忔槑 */ - .el-menu-demo { - border-bottom: 1px solid #EA7A28 !important; - /* 姗欒壊鐨勮竟妗� */ - background-color: transparent !important; - /* 浣跨敤!important鏉ョ‘淇濊鐩栭粯璁ゆ牱寮� */ - } - - /* 浼被锛堥紶鏍囬�変腑鏃剁殑鏍峰紡锛� */ - .el-menu-item:hover { - /* 褰撻紶鏍囨偓鍋滃湪鑿滃崟椤逛笂鏃� */ - background-color: #EA7A28 !important; - /* 璁剧疆鑳屾櫙鑹蹭负姗欒壊锛屽苟浣跨敤 !important 鏉ョ‘淇濊鐩栧叾浠栨牱寮� */ - color: white !important; - ; - /* 鍙兘杩橀渶瑕佽缃枃鏈鑹蹭互纭繚鍙鎬� */ - } - - /* 璁剧疆el-menu-item鍦ㄩ�変腑鏃剁殑鑳屾櫙棰滆壊涓烘鑹� */ - .el-menu-item.is-active { - color: #FDFCFD !important; - ; - background-color: #EA7A28 !important; - /* 浣跨敤!important鏉ョ‘淇濊鐩栭粯璁ゆ牱寮� */ - border-bottom: 1px solid #EA7A28 !important; - /* 鍦ㄥ簳閮ㄦ坊鍔犳鑹茬殑杈规 */ - } - - /* 濡傛灉浣犲笇鏈涢摼鎺ュ湪琚�変腑鏃朵篃鏈夋鑹茶儗鏅紝浣犲彲鑳借繕闇�瑕佽鐩杛outer-link鐨勬牱寮� */ - .router-link-active.is-active { - color: #FDFCFD !important; - /* 浣跨敤!important鏉ョ‘淇濊鐩栭粯璁ゆ牱寮� */ - /* background-color: #EA7A28 !important; */ + .barChart { + width: 100vw; + height: 80vh; } </style> \ No newline at end of file diff --git a/static/image/WMBg.png b/static/image/WMBg.png new file mode 100644 index 0000000..dde50b4 --- /dev/null +++ b/static/image/WMBg.png Binary files differ diff --git a/static/image/X.png b/static/image/X.png new file mode 100644 index 0000000..3472ad4 --- /dev/null +++ b/static/image/X.png Binary files differ diff --git a/static/image/fangda.png b/static/image/fangda.png new file mode 100644 index 0000000..0308fb8 --- /dev/null +++ b/static/image/fangda.png Binary files differ diff --git a/static/image/logo2.png b/static/image/logo2.png new file mode 100644 index 0000000..236b546 --- /dev/null +++ b/static/image/logo2.png Binary files differ diff --git a/static/image/logo3.png b/static/image/logo3.png new file mode 100644 index 0000000..a99dd22 --- /dev/null +++ b/static/image/logo3.png Binary files differ diff --git a/static/image/logo4.png b/static/image/logo4.png new file mode 100644 index 0000000..f29c257 --- /dev/null +++ b/static/image/logo4.png Binary files differ diff --git a/static/image/personageBg.png b/static/image/personageBg.png new file mode 100644 index 0000000..125bcc4 --- /dev/null +++ b/static/image/personageBg.png Binary files differ diff --git a/static/image/yinyong.png b/static/image/yinyong.png new file mode 100644 index 0000000..aecddf3 --- /dev/null +++ b/static/image/yinyong.png Binary files differ diff --git "a/static/image/\344\277\256\346\224\271\345\257\206\347\240\201.png" "b/static/image/\344\277\256\346\224\271\345\257\206\347\240\201.png" new file mode 100644 index 0000000..46cbc9a --- /dev/null +++ "b/static/image/\344\277\256\346\224\271\345\257\206\347\240\201.png" Binary files differ diff --git "a/static/image/\345\255\246\346\264\276Bg.png" "b/static/image/\345\255\246\346\264\276Bg.png" new file mode 100644 index 0000000..91181d9 --- /dev/null +++ "b/static/image/\345\255\246\346\264\276Bg.png" Binary files differ diff --git a/static/initialize.css b/static/initialize.css index 5def451..fa57458 100644 --- a/static/initialize.css +++ b/static/initialize.css @@ -3,14 +3,16 @@ padding: 0; box-sizing: border-box; } + html { font-size: calc(100 * 100vw / 1440) !important; /* font-size: 10px; */ } - + body { font-size: .16rem !important; } + .flex { display: flex; align-items: center; @@ -45,10 +47,12 @@ .flex-start { justify-content: flex-start } - .flex-content{ + + .flex-content { justify-content: space-around; } - .flex-items-start{ + + .flex-items-start { align-items: flex-start; } @@ -56,10 +60,39 @@ position: relative; z-index: 99999 !important; } + /* 瀛椾綋瀹嬩綋 */ - .font-family{ + .font-family { font-family: 瀹嬩綋; } + + /* 瓒呭嚭闅愯棌1 */ + .BeyondHiding1 { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + /* 瓒呭嚭闅愯棌2 */ + .BeyondHiding2 { + display: -webkit-box; + -webkit-line-clamp: 2; + /* 璁剧疆瑕佹樉绀虹殑琛屾暟 */ + -webkit-box-orient: vertical; + /* 璁剧疆鏄剧ず鏂瑰紡涓哄瀭鐩存柟鍚� */ + overflow: hidden; + /* 闅愯棌瓒呭嚭鐨勫唴瀹� */ + } + /* 瓒呭嚭闅愯棌3 */ + .BeyondHiding3 { + display: -webkit-box; + -webkit-line-clamp: 3; + /* 璁剧疆瑕佹樉绀虹殑琛屾暟 */ + -webkit-box-orient: vertical; + /* 璁剧疆鏄剧ず鏂瑰紡涓哄瀭鐩存柟鍚� */ + overflow: hidden; + /* 闅愯棌瓒呭嚭鐨勫唴瀹� */ + } + ul { list-style: none; } -- Gitblit v1.9.1