From d66eccc722b46fbb4b57bf28736b6f63a5ed0504 Mon Sep 17 00:00:00 2001 From: MrShi <1878285526@qq.com> Date: 星期五, 02 二月 2024 14:37:50 +0800 Subject: [PATCH] Mr.Shi --- company/src/views/index.vue | 416 +++++++++++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 344 insertions(+), 72 deletions(-) diff --git a/company/src/views/index.vue b/company/src/views/index.vue index cfae4c6..fa1dc67 100644 --- a/company/src/views/index.vue +++ b/company/src/views/index.vue @@ -1,33 +1,226 @@ <template> <div class="home"> - <!-- <div class="wrap"> - <h2>娆㈣繋浣跨敤浼婂▋鏋侀�熷紑鍙戞鏋�</h2> - <p>鎮ㄤ娇鐢ㄧ殑姝ゅ寮�婧愭鏋舵病鏈変换浣曠増鏉冮棶棰橈紝鍙涔犲彲鍟嗙敤锛岃鏀惧績浣跨敤锛�</p> - <p>浼婂▋鑷村姏浜庢墦閫犵畝娲併�佸悎鐞嗐�侀珮鏁堢殑寮�鍙戜綋楠岋紝涓烘鎴戜滑灏嗕笉鏂崌绾э紝鎰熻阿鎮ㄧ殑鏀寔锛�</p> - <p style="margin-top: 12px;"> - <a href="https://gitee.com/coderd-repos/eva" target="_blank">GITEE</a> - <a href="https://github.com/coderd-repos/eva" target="_blank">GITHUB</a> - </p> - <div class="guide"> - <a href="http://eva.adjustrd.com" target="_blank">鍓嶅線瀹樼綉</a> - <a href="http://coderd.adjustrd.com/template/308/default" target="_blank">鍓嶅線CodeRd</a> + <div class="home_inlet"> + <div class="home_inlet_label">蹇嵎鍏ュ彛</div> + <div class="home_inlet_list"> + <div class="home_inlet_item" v-for="(item, index) in cate" :key="index" @click="jump(item.url)"> + <img :src="item.icon" /> + <span>{{item.name}}</span> + </div> </div> - <img src="@/assets/images/qq.png"> - <p>浣犲彲浠ユ壂鐮佸姞鍏ョ兢鑱婁互鑾峰緱鎶�鏈敮鎸�</p> - <div class="award"> - <h4>婵�鍔变綔鑰呭仛寰楁洿濂�</h4> - <img src="@/assets/images/alipay.jpeg"> - <img src="@/assets/images/wxpay.jpeg"> + </div> + <div class="home_content"> + <div class="home_content_left"> + <div class="home_content_left_item" ref="picture1"></div> + <div class="home_content_left_item" ref="picture2"></div> + <div class="home_content_left_item" ref="picture3"></div> </div> - </div> --> + <div class="home_content_right"> + <div class="home_content_right_label">浠e姙浜嬮」</div> + <el-tabs v-model="activeName" @tab-click="handleClick"> + <el-tab-pane label="淇濆崟浠e姙" name="first"></el-tab-pane> + <el-tab-pane label="鐞嗚禂鎻愰啋" name="second"></el-tab-pane> + </el-tabs> + <div class="home_content_right_list"> + <div class="list_item" v-for="(item, index) in 1" :key="index"> + <div class="list_item_left"> + <span>鎶曚繚鐢宠锛堝緟绛剧讲锛�</span> + <span>淇濋櫓鏂规锛堥泧涓昏矗浠婚櫓A锛�</span> + </div> + <div class="list_item_center"> + <span>瀹夊窘骞冲畨浜哄姏璧勬簮鏈夐檺鍏徃</span> + <span>鎻愪氦鏃堕棿 2023-09-11 00:00:00</span> + </div> + <div class="list_item_right"> + <span>鏌ョ湅璇︽儏</span> + </div> + </div> + </div> + <div class="home_content_right_page"> + <el-pagination + @current-change="handleCurrentChange" + :current-page="page" + :page-size="5" + layout="total, prev, pager, next, jumper" + :total="0"> + </el-pagination> + </div> + </div> + </div> </div> </template> <script> +import * as echarts from 'echarts'; export default { name: 'Index', data () { - return {} + return { + activeName: 'first', + page: 1, + cate: [ + { + name: '鎶曚繚鐢宠', + url: '', + icon: require('../assets/logo.png') + }, + { + name: '鍔犱繚鐢宠', + url: '', + icon: require('../assets/logo.png') + }, + { + name: '鍑忎繚鐢宠', + url: '', + icon: require('../assets/logo.png') + }, + { + name: '鍚堝悓绠$悊', + url: '', + icon: require('../assets/logo.png') + }, + { + name: '鎻愪氦鎶ユ', + url: '', + icon: require('../assets/logo.png') + } + ] + } + }, + mounted() { + this.setPicture1() + this.setPicture2() + this.setPicture3() + }, + methods: { + handleClick(e) { + this.activeName = e.name + }, + handleCurrentChange(page) { + this.page = page + }, + jump(url) { + if (!url) return; + this.$router.push({ path: url }); + }, + setPicture1 () { + let chartDom = this.$refs.picture1; + let myChart = echarts.init(chartDom); + let option + option = { + title: { + text: '褰撴湀淇濋櫓閲戦', + left: '5%', + top: '5%' + }, + tooltip: { + trigger: 'item' + }, + series: [ + { + type: 'pie', + radius: '50%', + data: [ + { value: 1048, name: '淇濋殰涓�' }, + { value: 735, name: '涓嶅湪淇�' }, + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] + }; + + option && myChart.setOption(option); + }, + setPicture2 () { + let chartDom = this.$refs.picture2; + let myChart = echarts.init(chartDom); + let option + option = { + title: { + text: '褰撴湀鍦ㄤ繚浜烘暟', + left: '5%', + top: '5%' + }, + grid: { + left: '3%', + right: '4%', + bottom: '13%', + containLabel: true + }, + tooltip: { + trigger: 'axis' + }, + xAxis: { + type: 'category', + data: ['涓�鏈�', '浜屾湀', '涓夋湀', '鍥涙湀', '浜旀湀', '鍏湀', '涓冩湀', '鍏湀', '涔濇湀', '鍗佹湀', '鍗佷竴鏈�', '鍗佷簩鏈�'] + }, + yAxis: { + type: 'value' + }, + series: [ + { + data: [10, 30, 25, 16, 21, 18, 5, 30, 30, 30, 30, 30], + type: 'line' + } + ] + }; + + option && myChart.setOption(option); + }, + setPicture3 () { + let chartDom = this.$refs.picture3; + let myChart = echarts.init(chartDom); + let option + option = { + title: { + text: '鎬昏禂浠樼巼 78%', + left: '5%', + top: '5%' + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: '3%', + right: '4%', + bottom: '25%', + containLabel: true + }, + xAxis: { + type: 'value', + // boundaryGap: [0, 0.01] + }, + yAxis: { + type: 'category', + data: ['淇濋櫓A璧斾粯鐜�', '淇濋櫓B璧斾粯鐜�', '鎬昏禂浠樼巼'] + }, + series: [ + { + type: 'bar', + stack: 'total', + barWidth: '60%', + data: [10, 20, 30] + }, + { + type: 'bar', + stack: 'total', + barWidth: '60%', + data: [15, 16, 24] + } + ] + }; + + option && myChart.setOption(option); + } } } </script> @@ -35,63 +228,142 @@ <style scoped lang="scss"> @import "@/assets/style/variables.scss"; .home { - text-align: center; - color: #777; - .wrap { - margin-top: 80px; - img { - width: 240px; - } - } - h2 { - font-size: 32px; - color: #555; - margin-bottom: 20px; - } - p { - line-height: 24px; - margin: 0; - } - .start-up { - margin-top: 8px; - } - .guide { - margin: 30px 0 40px 0; - display: flex; - justify-content: center; - a { - margin-right: 12px; - padding: 12px 40px; - border-radius: 30px; - background: $primary-color; - color: #fff; - text-decoration: none; - } - } - em,a { - font-style: normal; - font-weight: bold; - margin: 0 3px; - color: $primary-color; - } - .award { - position: absolute; - right: 20px; - bottom: 60px; + width: 100%; + height: 100%; + .home_inlet { + width: 100%; + height: 160px; display: flex; flex-direction: column; - text-align: left; - padding: 12px; - border: 1px solid #eee; - box-shadow: -1px 1px 10px #ccc; - h4 { + padding: 20px; + box-sizing: border-box; + background: #ffffff; + .home_inlet_label { + width: 100%; + font-size: 18px; font-weight: bold; - margin-bottom: 8px; - } - img { - width: 160px; + color: black; margin-bottom: 20px; - transition: opacity ease .3s; + } + .home_inlet_list { + width: 100%; + display: flex; + align-items: center; + .home_inlet_item { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + cursor: pointer; + img { + width: 40px; + height: 40px; + } + span { + font-size: 14px; + color: black; + margin-top: 5px; + } + } + } + } + .home_content { + width: 100%; + height: calc(100% - 170px); + margin-top: 10px; + display: flex; + align-items: center; + justify-content: space-between; + .home_content_left { + width: 350px; + height: 100%; + flex-shrink: 0; + display: flex; + flex-direction: column; + justify-content: space-between; + .home_content_left_item { + width: 100%; + height: 32%; + background: #ffffff; + } + } + .home_content_right { + flex: 1; + height: 100%; + background: #ffffff; + margin-left: 10px; + padding: 20px; + box-sizing: border-box; + position: relative; + .home_content_right_label { + font-size: 18px; + color: black; + font-weight: bold; + } + .home_content_right_list { + width: 100%; + display: flex; + flex-direction: column; + .list_item { + padding: 10px; + box-sizing: border-box; + width: 100%; + display: flex; + justify-content: space-between; + border: 1px solid #ececec; + margin-bottom: 15px; + &:last-child { + margin-bottom: 0 !important; + } + .list_item_left { + display: flex; + flex-direction: column; + span { + &:nth-child(1) { + font-size: 14px; + color: black; + font-weight: bold; + } + &:nth-child(2) { + font-size: 14px; + color: black; + margin-top: 5px; + } + } + } + .list_item_center { + display: flex; + flex-direction: column; + span { + font-size: 14px; + color: black; + &:nth-child(2) { + margin-top: 5px; + } + } + } + .list_item_right { + height: 100%; + display: flex; + align-items: center; + justify-content: center; + span { + font-size: 14px; + color: #1890FF; + margin-top: 10px; + cursor: pointer; + } + } + } + } + .home_content_right_page { + margin-top: 20px; + position: absolute; + bottom: 20px; + left: 20px; + box-sizing: border-box; + } } } } -- Gitblit v1.9.3