|
|
@@ -0,0 +1,620 @@
|
|
|
+<template>
|
|
|
+ <div class="main_container">
|
|
|
+ <div style="background-color: #F5F7FB;overflow: hidden;">
|
|
|
+ <div class="top">
|
|
|
+ <div class="top_one">
|
|
|
+ <div class="top_one left">
|
|
|
+ <span>会助理平台</span>
|
|
|
+ </div>
|
|
|
+ <div class="top_one middle">
|
|
|
+ <el-input popper-class="my-autocomplete" v-model="queryWord" style="width: 81.25%;">
|
|
|
+ <i class="el-icon-search" slot="suffix" @click="handleQuery()"
|
|
|
+ style="width:2%; height: 100%; display: flex;align-items: center;cursor: pointer">
|
|
|
+ </i>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="top_one right">
|
|
|
+ <div style="display: flex;width: 15vh;justify-content: flex-end;align-items: center;font-weight: 400;
|
|
|
+ font-size: 14px; text-overflow: ellipsis;">
|
|
|
+ <el-avatar size="medium"
|
|
|
+ src="https://hzl.willalp.com/static/img/profile.b87e3d56.jpg"></el-avatar>
|
|
|
+ <span style="margin-left: 10%;cursor: pointer">用户名</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="margin-left: 10%;margin-right: 8%">
|
|
|
+ <span style="cursor: pointer">注销</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="top_two">
|
|
|
+ <div class="top_two left">
|
|
|
+ <el-avatar size="medium"
|
|
|
+ src="https://hzl.willalp.com/static/img/profile.b87e3d56.jpg"></el-avatar>
|
|
|
+ <span style="margin-left: 2%;">xxx注册机构</span>
|
|
|
+ </div>
|
|
|
+ <div class="top_two middle">
|
|
|
+ <el-menu default-active="1" class="top_two_menu" mode="horizontal" @select="">
|
|
|
+ <el-menu-item index="1">首页</el-menu-item>
|
|
|
+ <el-menu-item index="2">操作台</el-menu-item>
|
|
|
+ <el-menu-item index="3">个人中心</el-menu-item>
|
|
|
+ </el-menu>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="left">
|
|
|
+ <div class="left_top">
|
|
|
+ <div class="left_top left">
|
|
|
+ <div class="block" style="height:100%;width: 100%;">
|
|
|
+ <el-carousel height="29.5vh">
|
|
|
+ <el-carousel-item v-for="item in 4" :key="item">
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="left_top right">
|
|
|
+ <a class="moreMessage" @click="">更多</a>
|
|
|
+ <el-tabs v-model="leftTopRight" @tab-click="" style="width: 98%; margin: 0px auto">
|
|
|
+ <el-tab-pane label="机构资讯" name="">
|
|
|
+ <div style="overflow-y: auto;height: 20vh;">
|
|
|
+ <el-row v-for="(item, index) of dataList" :key="index">
|
|
|
+ <div>
|
|
|
+ <el-row>
|
|
|
+ <div style="margin-bottom: 5px;">
|
|
|
+ <div class="leftContent">{{ item.title }}</div>
|
|
|
+ <div class="rightContent">{{ item.createTime }}</div>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="公司要闻" name=""></el-tab-pane>
|
|
|
+ <el-tab-pane label="通知公告" name=""></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="left_middle">
|
|
|
+ <a class="moreMessage" @click="">更多</a>
|
|
|
+ <el-tabs v-model="leftMiddle" @tab-click="" style="width: 98%; margin: 0px auto">
|
|
|
+ <el-tab-pane label="专栏" name="">
|
|
|
+ <div style="overflow-y: auto;height: 30vh;">
|
|
|
+ <el-row v-for="(item, index) of dataList2" :key="index">
|
|
|
+ <div>
|
|
|
+ <el-row>
|
|
|
+ <div style="margin-bottom: 5px;">
|
|
|
+ <div class="leftContentPrefix">[ {{ item.tag }} ]</div>
|
|
|
+ <div class="leftContent">{{ item.title }}</div>
|
|
|
+ <div class="rightContent">{{ item.createTime }}</div>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="党建" name=""></el-tab-pane>
|
|
|
+ <el-tab-pane label="团建" name=""></el-tab-pane>
|
|
|
+ <el-tab-pane label="工会" name=""></el-tab-pane>
|
|
|
+ <el-tab-pane label="政策" name=""></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ <div class="left_bottom">
|
|
|
+ <a class="moreMessage" @click="">更多</a>
|
|
|
+ <el-tabs v-model="leftBottom" @tab-click="" style="width: 98%; margin: 0px auto">
|
|
|
+ <el-tab-pane label="平台咨询" name="">
|
|
|
+ <div class="sys_card" v-for="item in ptzxList">
|
|
|
+ <img :src="item.coverPic" style="width: 100%;height: 100%;border-radius: 4px;"
|
|
|
+ @click=""></img>
|
|
|
+ <div class="sys_card_title">
|
|
|
+ <div style="width: 98%;">
|
|
|
+ <el-row>
|
|
|
+ <span class="sys_card_title_font"
|
|
|
+ style="color: #fff;font-size: 13px;font-weight: bold;margin-left: 1vh;margin-top: 1vh; ">
|
|
|
+ {{ item.title }}
|
|
|
+ </span>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <span class="sys_card_title_font"
|
|
|
+ style="color: #fff;font-size: 12px;margin-left: 1vh;">
|
|
|
+ {{ item.sketch }}
|
|
|
+ </span>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="right_top">
|
|
|
+ <a class="moreMessage" @click="">更多</a>
|
|
|
+ <el-tabs @tab-click="" style="width: 98%; margin: 0px auto">
|
|
|
+ <el-tab-pane label="跳转模块" name="">
|
|
|
+ <div v-for="(item, index) of menuList" :key="index" style="display: inline">
|
|
|
+ <div class="listItem" @click="" style="cursor: pointer">
|
|
|
+ <div>
|
|
|
+ <div class="menuImg">
|
|
|
+ <img class="imgSty" :src="item.imgUrl" />
|
|
|
+ </div>
|
|
|
+ <div class="titleSty">
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="right_middle">
|
|
|
+ <a class="moreMessage" @click="">更多</a>
|
|
|
+ <el-tabs v-model="rightMiddle" @tab-click="" style="width: 98%; margin: 0px auto">
|
|
|
+ <el-tab-pane label="规章制度" name="">
|
|
|
+ <div style="overflow-y: auto;height: 30vh;">
|
|
|
+ <el-row v-for="(item, index) of dataList3" :key="index">
|
|
|
+ <div>
|
|
|
+ <el-row>
|
|
|
+ <div style="margin-bottom: 5px;">
|
|
|
+ <!-- <div class="leftContentPrefix">[ {{ item.tag }} ]</div> -->
|
|
|
+ <div class="leftContent">{{ item.title }}</div>
|
|
|
+ <div class="rightContent">{{ item.createTime }}</div>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ <div class="right_bottom">
|
|
|
+ <a class="moreMessage" @click="">更多</a>
|
|
|
+ <el-tabs v-model="rightBottom" @tab-click="" style="width: 98%; margin: 0px auto">
|
|
|
+ <el-tab-pane label="文件下载" name="">
|
|
|
+ <div style="overflow-y: auto;height: 20vh;">
|
|
|
+ <el-row v-for="(item, index) of dataList3" :key="index">
|
|
|
+ <div>
|
|
|
+ <el-row>
|
|
|
+ <div style="margin-bottom: 5px;">
|
|
|
+ <!-- <div class="leftContentPrefix">[ {{ item.tag }} ]</div> -->
|
|
|
+ <div style="display: inline-block;">
|
|
|
+ <div class="leftContent">{{ item.title }}</div>
|
|
|
+ <div style="width: 20vh;">{{ item.createTime }}</div>
|
|
|
+ </div>
|
|
|
+ <div style="float: right;">
|
|
|
+ <el-button class="rightBottomButter">下载</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "Navigation",
|
|
|
+ components: {
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ queryWord: undefined,
|
|
|
+ leftTopRight: undefined,
|
|
|
+ leftMiddle: undefined,
|
|
|
+ rightMiddle: undefined,
|
|
|
+ leftBottom: undefined,
|
|
|
+ rightBottom: undefined,
|
|
|
+ dataList: [
|
|
|
+ { title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
|
|
|
+ { title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
|
|
|
+ { title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
|
|
|
+ { title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
|
|
|
+ // { title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
|
|
|
+ // { title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
|
|
|
+ // { title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
|
|
|
+ // { title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
|
|
|
+ // { title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
|
|
|
+ ],
|
|
|
+ dataList2: [
|
|
|
+ { tag: "党政要闻", title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
|
|
|
+ { tag: "党政要闻", title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
|
|
|
+ { tag: "党政要闻", title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
|
|
|
+ { tag: "党政要闻", title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
|
|
|
+ { tag: "党政要闻", title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
|
|
|
+ // { tag: "党政要闻", title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
|
|
|
+ // { tag: "党政要闻", title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
|
|
|
+ // { tag: "党政要闻", title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
|
|
|
+ // { tag: "党政要闻", title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
|
|
|
+ // { tag: "党政要闻", title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
|
|
|
+ ],
|
|
|
+ dataList3: [
|
|
|
+ { title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
|
|
|
+ { title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
|
|
|
+ { title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
|
|
|
+ { title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
|
|
|
+ { title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
|
|
|
+ { title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
|
|
|
+ { title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
|
|
|
+ { title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
|
|
|
+ ],
|
|
|
+ menuList: [
|
|
|
+ { name: "市场1", imgUrl: "https://hzl.willalp.com:9000/willalpbucket/2.png" },
|
|
|
+ { name: "市场2", imgUrl: "https://hzl.willalp.com:9000/willalpbucket/2.png" },
|
|
|
+ { name: "市场3", imgUrl: "https://hzl.willalp.com:9000/willalpbucket/2.png" },
|
|
|
+ { name: "市场4", imgUrl: "https://hzl.willalp.com:9000/willalpbucket/2.png" },
|
|
|
+ { name: "市场5", imgUrl: "https://hzl.willalp.com:9000/willalpbucket/2.png" },
|
|
|
+ { name: "市场6", imgUrl: "https://hzl.willalp.com:9000/willalpbucket/2.png" },
|
|
|
+ { name: "市场7", imgUrl: "https://hzl.willalp.com:9000/willalpbucket/2.png" },
|
|
|
+ { name: "市场8", imgUrl: "https://hzl.willalp.com:9000/willalpbucket/2.png" },
|
|
|
+ { name: "市场9", imgUrl: "https://hzl.willalp.com:9000/willalpbucket/2.png" },
|
|
|
+ { name: "市场10", imgUrl: "https://hzl.willalp.com:9000/willalpbucket/2.png" },
|
|
|
+ ],
|
|
|
+ ptzxList: [
|
|
|
+ { coverPic: "https://ts.willalp.com:9002/willalpbucket/微信图片_2024032809233720240328092531.png", title: "清明放假通知", sketch: "放假时间:4月4-6日放假，共3天。4月7日(星期日)上班。" },
|
|
|
+ { coverPic: "https://ts.willalp.com:9002/willalpbucket/微信图片_2024032809233720240328092531.png", title: "清明放假通知", sketch: "放假时间:4月4-6日放假，共3天。4月7日(星期日)上班。" },
|
|
|
+ { coverPic: "https://ts.willalp.com:9002/willalpbucket/微信图片_2024032809233720240328092531.png", title: "清明放假通知", sketch: "放假时间:4月4-6日放假，共3天。4月7日(星期日)上班。" }
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ beforeCreate() {
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /** 处理搜索 */
|
|
|
+ handleQuery() {
|
|
|
+ console.log(this.queryWord)
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+::v-deep .el-tabs__item {
|
|
|
+ color: #6F6F6F;
|
|
|
+}
|
|
|
+::v-deep .el-tabs__item.is-active {
|
|
|
+ color: #333333;
|
|
|
+}
|
|
|
+.rightBottomButter {
|
|
|
+ background: #FF9736;
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ border: 1px solid #FF9736;
|
|
|
+
|
|
|
+ font-family: Inter, Inter;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 16px;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+}
|
|
|
+
|
|
|
+.sys_card_title_font {
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -o-text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+.sys_card_title {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 35%;
|
|
|
+ background-color: rgba(0, 0, 0, 0.3);
|
|
|
+ border-bottom-left-radius: 4px;
|
|
|
+ border-bottom-right-radius: 4px;
|
|
|
+ bottom: 0;
|
|
|
+ display: block;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -o-text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+.sys_card {
|
|
|
+ width: 31%;
|
|
|
+ height: 19vh;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #f2f2f2;
|
|
|
+ margin: auto 1%;
|
|
|
+ position: relative;
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+
|
|
|
+.titleSty {
|
|
|
+ margin-top: 10px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.imgSty {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.menuImg {
|
|
|
+ width: 5vh;
|
|
|
+ height: 5vh;
|
|
|
+ /* margin: 1vh auto 0 auto; */
|
|
|
+ margin: 1vh auto 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+.listItem {
|
|
|
+ width: 20%;
|
|
|
+ /* height: 14vh; */
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+
|
|
|
+.rightContent {
|
|
|
+ /* display: inline-block; */
|
|
|
+ float: right;
|
|
|
+ margin-right: 25px;
|
|
|
+
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #6F6F6F;
|
|
|
+ line-height: 25px;
|
|
|
+ text-align: center;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+}
|
|
|
+
|
|
|
+.leftContentPrefix {
|
|
|
+ display: inline-block;
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #3B71DD;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ margin-right: 1%;
|
|
|
+}
|
|
|
+
|
|
|
+.leftContent {
|
|
|
+ display: inline-block;
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333333;
|
|
|
+ text-align: center;
|
|
|
+ font-style: normal;
|
|
|
+}
|
|
|
+
|
|
|
+.moreMessage {
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ top: 12px;
|
|
|
+ z-index: 9;
|
|
|
+}
|
|
|
+
|
|
|
+.left_bottom .left {
|
|
|
+ height: 100vh;
|
|
|
+ width: 49.5%;
|
|
|
+ /* background-color: #fff; */
|
|
|
+ border-radius: 6px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.el-carousel__item h3 {
|
|
|
+ color: #475669;
|
|
|
+ font-size: 14px;
|
|
|
+ opacity: 0.75;
|
|
|
+ line-height: 150px;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.el-carousel__item:nth-child(2n) {
|
|
|
+ background-color: #99a9bf;
|
|
|
+}
|
|
|
+
|
|
|
+.el-carousel__item:nth-child(2n+1) {
|
|
|
+ background-color: #d3dce6;
|
|
|
+}
|
|
|
+
|
|
|
+.top {
|
|
|
+ height: 13vh;
|
|
|
+ width: 100%;
|
|
|
+ /* background-color: red; */
|
|
|
+}
|
|
|
+
|
|
|
+.top_one {
|
|
|
+ height: 6.5vh;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #3B71DD;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.top_one .left {
|
|
|
+ width: 33.33%;
|
|
|
+ height: 85%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ /* line-height: 28px; */
|
|
|
+ letter-spacing: 8px;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ margin-left: 40px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.top_one .middle {
|
|
|
+ width: 33.33%;
|
|
|
+}
|
|
|
+
|
|
|
+.top_one .right {
|
|
|
+ justify-content: flex-end;
|
|
|
+ width: 33.33%;
|
|
|
+ height: 85%;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 16px;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.top_two {
|
|
|
+ height: 6.5vh;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.top_two .left {
|
|
|
+ width: 20%;
|
|
|
+ height: 85%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24px;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ line-height: 28px;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.top_two .middle {
|
|
|
+ width: 60%;
|
|
|
+}
|
|
|
+
|
|
|
+.top_two_menu {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ font-family: Inter, Inter;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #6F6F6F;
|
|
|
+ line-height: 28px;
|
|
|
+ text-align: center;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+}
|
|
|
+
|
|
|
+.el-menu-item {
|
|
|
+ margin: 0 6%;
|
|
|
+}
|
|
|
+
|
|
|
+.left {
|
|
|
+ height: 100vh;
|
|
|
+ width: 54.25%;
|
|
|
+ margin-left: 1.5%;
|
|
|
+ margin-top: 1vh;
|
|
|
+ float: left;
|
|
|
+ /* background-color: blue; */
|
|
|
+}
|
|
|
+
|
|
|
+.left_top {
|
|
|
+ margin-top: 0;
|
|
|
+ height: 29.5vh;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+
|
|
|
+.left_top .left {
|
|
|
+ display: flex;
|
|
|
+ width: 42%;
|
|
|
+ height: 100%;
|
|
|
+ /* background-color: rgb(255, 0, 0); */
|
|
|
+}
|
|
|
+
|
|
|
+.left_top .right {
|
|
|
+ margin-top: 0;
|
|
|
+ display: flex;
|
|
|
+ width: 58%;
|
|
|
+ height: 100%;
|
|
|
+ /* background-color: rgb(255, 0, 191); */
|
|
|
+
|
|
|
+ /* height: 100vh; */
|
|
|
+ /* width: 49.5%; */
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.left_middle {
|
|
|
+ height: 38vh;
|
|
|
+ margin-top: 2vh;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.left_bottom {
|
|
|
+ height: 28.5vh;
|
|
|
+ margin-top: 2vh;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.right {
|
|
|
+ height: 100vh;
|
|
|
+ width: 41.25%;
|
|
|
+ margin-left: 1.5%;
|
|
|
+ margin-top: 1vh;
|
|
|
+ float: left;
|
|
|
+ /* background-color: green; */
|
|
|
+}
|
|
|
+
|
|
|
+.right_top {
|
|
|
+ height: 29.5vh;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ ;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.right_middle {
|
|
|
+ height: 38vh;
|
|
|
+ margin-top: 2vh;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.right_bottom {
|
|
|
+ height: 28.5vh;
|
|
|
+ margin-top: 2vh;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom {
|
|
|
+ height: 5vh;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 2vh;
|
|
|
+ float: left;
|
|
|
+ /* background-color: rgb(1, 7, 1); */
|
|
|
+}
|
|
|
+</style>
|
GXL