|
|
@@ -33,18 +33,10 @@
|
|
|
|
|
|
<div class="cen—top-right">
|
|
|
<div class="cen—top-div">
|
|
|
- <el-input
|
|
|
- type="text"
|
|
|
- placeholder="请输入文档信息"
|
|
|
- v-model="input"
|
|
|
- class="searchs"
|
|
|
- @keyup.enter.native="jumpSearch"
|
|
|
- ></el-input>
|
|
|
+ <el-input type="text" placeholder="请输入文档信息" v-model="input" class="searchs"
|
|
|
+ @keyup.enter.native="jumpSearch"></el-input>
|
|
|
<div class="cen—top-but" @click="jumpSearch">快速搜索</div>
|
|
|
- <img
|
|
|
- src="../../assets/img/ri：search-2-line@2x.png"
|
|
|
- class="cen—top-img"
|
|
|
- />
|
|
|
+ <img src="../../assets/img/ri：search-2-line@2x.png" class="cen—top-img" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -96,13 +88,7 @@
|
|
|
<h3>最近收到的文件</h3>
|
|
|
<p @click="mores">更多</p>
|
|
|
</div>
|
|
|
- <el-table
|
|
|
- :data="tableData1"
|
|
|
- stripe
|
|
|
- style="width: 99%"
|
|
|
- class="left-main"
|
|
|
- height="calc(100vh * (230 / 1080))"
|
|
|
- >
|
|
|
+ <el-table :data="tableData1" stripe style="width: 99%" class="left-main" height="calc(100vh * (230 / 1080))">
|
|
|
<el-table-column prop="docName" label="文件名" width="180">
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="user" label="发件人" width="120">
|
|
|
@@ -111,26 +97,11 @@
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="docType" label="文件类型" width="80">
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="docLevel"
|
|
|
- label="文件级别"
|
|
|
- width="80"
|
|
|
- :formatter="fileLevelData"
|
|
|
- >
|
|
|
+ <el-table-column prop="docLevel" label="文件级别" width="80" :formatter="fileLevelData">
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
- label="操作"
|
|
|
- align="center"
|
|
|
- class-name="small-padding fixed-width"
|
|
|
- >
|
|
|
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-button
|
|
|
- size="mini"
|
|
|
- type="text"
|
|
|
- icon="el-icon-view"
|
|
|
- @click="handlePreview(scope.row)"
|
|
|
- >预览</el-button
|
|
|
- >
|
|
|
+ <el-button size="mini" type="text" icon="el-icon-view" @click="handlePreview(scope.row)">预览</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
@@ -140,39 +111,18 @@
|
|
|
<h3>最近发送的文件</h3>
|
|
|
<p @click="mores2">更多</p>
|
|
|
</div>
|
|
|
- <el-table
|
|
|
- :data="tableData2"
|
|
|
- stripe
|
|
|
- style="width: 99%"
|
|
|
- class="right-main"
|
|
|
- height="calc(100vh * (230 / 1080))"
|
|
|
- >
|
|
|
+ <el-table :data="tableData2" stripe style="width: 99%" class="right-main" height="calc(100vh * (230 / 1080))">
|
|
|
<el-table-column prop="docName" label="文件名" width="180">
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="createTime" label="收到时间" width="180">
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="docType" label="文件类型" width="120">
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="docLevel"
|
|
|
- label="文件级别"
|
|
|
- width="80"
|
|
|
- :formatter="fileLevelData"
|
|
|
- >
|
|
|
+ <el-table-column prop="docLevel" label="文件级别" width="80" :formatter="fileLevelData">
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
- label="操作"
|
|
|
- align="center"
|
|
|
- class-name="small-padding fixed-width"
|
|
|
- >
|
|
|
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-button
|
|
|
- size="mini"
|
|
|
- type="text"
|
|
|
- icon="el-icon-view"
|
|
|
- @click="handlePreview(scope.row)"
|
|
|
- >预览</el-button
|
|
|
- >
|
|
|
+ <el-button size="mini" type="text" icon="el-icon-view" @click="handlePreview(scope.row)">预览</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
@@ -184,33 +134,12 @@
|
|
|
<audio :src="aud" controls v-if="aud1"></audio>
|
|
|
|
|
|
<div class="image-container" v-if="img1">
|
|
|
- <el-image
|
|
|
- :src="imgg"
|
|
|
- ref="imageRef"
|
|
|
- style="max-width: 100%"
|
|
|
- @mousewheel.prevent="gunlun"
|
|
|
- />
|
|
|
+ <el-image :src="imgg" ref="imageRef" style="max-width: 100%" @mousewheel.prevent="gunlun" />
|
|
|
<el-button-group>
|
|
|
- <el-button
|
|
|
- icon="el-icon-refresh-left"
|
|
|
- @click="rotate(-90)"
|
|
|
- title="向左旋转"
|
|
|
- ></el-button>
|
|
|
- <el-button
|
|
|
- icon="el-icon-refresh-right"
|
|
|
- @click="rotate(90)"
|
|
|
- title="向右旋转"
|
|
|
- ></el-button>
|
|
|
- <el-button
|
|
|
- icon="el-icon-zoom-in"
|
|
|
- @click="scale(0.1)"
|
|
|
- title="放大"
|
|
|
- ></el-button>
|
|
|
- <el-button
|
|
|
- icon="el-icon-zoom-out"
|
|
|
- @click="scale(-0.1)"
|
|
|
- title="缩小"
|
|
|
- ></el-button>
|
|
|
+ <el-button icon="el-icon-refresh-left" @click="rotate(-90)" title="向左旋转"></el-button>
|
|
|
+ <el-button icon="el-icon-refresh-right" @click="rotate(90)" title="向右旋转"></el-button>
|
|
|
+ <el-button icon="el-icon-zoom-in" @click="scale(0.1)" title="放大"></el-button>
|
|
|
+ <el-button icon="el-icon-zoom-out" @click="scale(-0.1)" title="缩小"></el-button>
|
|
|
</el-button-group>
|
|
|
</div>
|
|
|
<el-button class="gb" icon="el-icon-close" circle @click="gb" />
|
|
|
@@ -260,12 +189,7 @@
|
|
|
</div> -->
|
|
|
|
|
|
<!-- 查看详细 -->
|
|
|
- <el-dialog
|
|
|
- title="内容详细"
|
|
|
- :visible.sync="look1"
|
|
|
- width="30%"
|
|
|
- custom-class="el-dialog6"
|
|
|
- >
|
|
|
+ <el-dialog title="内容详细" :visible.sync="look1" width="30%" custom-class="el-dialog6">
|
|
|
<div class="main" v-html="details"></div>
|
|
|
<span slot="footer" class="dialog-footer1">
|
|
|
<el-button type="primary" @click="look1 = false">确 定</el-button>
|
|
|
@@ -276,974 +200,1088 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import Cookies from "js-cookie";
|
|
|
-
|
|
|
-import "@/styles1/element-ui1.scss";
|
|
|
-
|
|
|
-import { listLevel } from "@/api/doc/level";
|
|
|
-
|
|
|
-import { delShare1, delShare2, notice, msg } from "@/api/doc/share1";
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- //文件等级数据
|
|
|
- levelOptions: [],
|
|
|
- //内容详细弹窗
|
|
|
- look1: false,
|
|
|
- //内容详细弹窗内容
|
|
|
- details: "",
|
|
|
- //中间通知列表
|
|
|
- notices: [],
|
|
|
- //中间消息列表
|
|
|
- msg: [],
|
|
|
- //搜索
|
|
|
- type: "1",
|
|
|
- input: "",
|
|
|
- //机密文件的账号密码内容
|
|
|
- // loginForm: {
|
|
|
- // username: "",
|
|
|
- // password: "",
|
|
|
- // },
|
|
|
- //机密文件的账号密码验证规则
|
|
|
- // loginRules: {
|
|
|
- // username: [
|
|
|
- // { required: true, trigger: "blur", message: "请输入您的用户名" },
|
|
|
- // ],
|
|
|
- // password: [
|
|
|
- // { required: true, trigger: "blur", message: "请输入您的密码" },
|
|
|
- // ],
|
|
|
- // },
|
|
|
+ import Cookies from "js-cookie";
|
|
|
|
|
|
- //底部左边表格数据
|
|
|
- tableData1: [],
|
|
|
- //底部右边表格数据
|
|
|
- tableData2: [],
|
|
|
- //预览图片的旋转
|
|
|
- scalePercentage: 1,
|
|
|
- //预览图片的缩放
|
|
|
- rotationAngle: 0,
|
|
|
-
|
|
|
- // 预览界面
|
|
|
- preview: false,
|
|
|
-
|
|
|
- // 机密界面
|
|
|
- // check: false,
|
|
|
-
|
|
|
- //视频路径和显示
|
|
|
- vid: "",
|
|
|
- vid1: false,
|
|
|
- //音频路径和显示
|
|
|
- aud: "",
|
|
|
- aud1: false,
|
|
|
- //图片路径和显示
|
|
|
- imgg: "",
|
|
|
- img1: false,
|
|
|
- // 临时保存当前点击行 row
|
|
|
- currentRow: {},
|
|
|
- };
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.getList();
|
|
|
- this.noticesList();
|
|
|
- this.msgList();
|
|
|
- // this.loginForm.username = sessionStorage.getItem("name");
|
|
|
- },
|
|
|
- methods: {
|
|
|
- //通知内容更多
|
|
|
- leftMores() {
|
|
|
- this.$router.push("/home/page/leftmores");
|
|
|
- },
|
|
|
- //消息内容更多
|
|
|
- rightMores() {
|
|
|
- this.$router.push("/home/page/rightmores");
|
|
|
- },
|
|
|
- //内容详细
|
|
|
- looks(val) {
|
|
|
- this.look1 = true;
|
|
|
- this.details = val;
|
|
|
- },
|
|
|
- //中间通知列表
|
|
|
- noticesList() {
|
|
|
- notice().then((response) => {
|
|
|
- this.notices = response.rows;
|
|
|
- // console.log(response.rows);
|
|
|
- });
|
|
|
- },
|
|
|
- //中间通知列表
|
|
|
- msgList() {
|
|
|
- msg().then((response) => {
|
|
|
- this.msg = response.rows;
|
|
|
- });
|
|
|
- },
|
|
|
+ import "@/styles1/element-ui1.scss";
|
|
|
|
|
|
- // 搜索跳转
|
|
|
- jumpSearch() {
|
|
|
- this.$router.push({
|
|
|
- path: "/home/retrieval",
|
|
|
- query: { datas: this.input, data2:this.type },
|
|
|
- });
|
|
|
- // sessionStorage.setItem("suju", this.input);
|
|
|
- },
|
|
|
- //底部左边表格更多跳转
|
|
|
- mores() {
|
|
|
- this.$router.push("/home/page/more");
|
|
|
+ import {
|
|
|
+ listLevel
|
|
|
+ } from "@/api/doc/level";
|
|
|
+ import {
|
|
|
+ officeType
|
|
|
+ } from "@/api/doc/info";
|
|
|
+ import {
|
|
|
+ delShare1,
|
|
|
+ delShare2,
|
|
|
+ notice,
|
|
|
+ msg
|
|
|
+ } from "@/api/doc/share1";
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ //文件等级数据
|
|
|
+ levelOptions: [],
|
|
|
+ //内容详细弹窗
|
|
|
+ look1: false,
|
|
|
+ //内容详细弹窗内容
|
|
|
+ details: "",
|
|
|
+ //中间通知列表
|
|
|
+ notices: [],
|
|
|
+ //中间消息列表
|
|
|
+ msg: [],
|
|
|
+ //搜索
|
|
|
+ type: "1",
|
|
|
+ input: "",
|
|
|
+ //机密文件的账号密码内容
|
|
|
+ // loginForm: {
|
|
|
+ // username: "",
|
|
|
+ // password: "",
|
|
|
+ // },
|
|
|
+ //机密文件的账号密码验证规则
|
|
|
+ // loginRules: {
|
|
|
+ // username: [
|
|
|
+ // { required: true, trigger: "blur", message: "请输入您的用户名" },
|
|
|
+ // ],
|
|
|
+ // password: [
|
|
|
+ // { required: true, trigger: "blur", message: "请输入您的密码" },
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+
|
|
|
+ //底部左边表格数据
|
|
|
+ tableData1: [],
|
|
|
+ //底部右边表格数据
|
|
|
+ tableData2: [],
|
|
|
+ //预览图片的旋转
|
|
|
+ scalePercentage: 1,
|
|
|
+ //预览图片的缩放
|
|
|
+ rotationAngle: 0,
|
|
|
+
|
|
|
+ // 预览界面
|
|
|
+ preview: false,
|
|
|
+
|
|
|
+ // 机密界面
|
|
|
+ // check: false,
|
|
|
+
|
|
|
+ //视频路径和显示
|
|
|
+ vid: "",
|
|
|
+ vid1: false,
|
|
|
+ //音频路径和显示
|
|
|
+ aud: "",
|
|
|
+ aud1: false,
|
|
|
+ //图片路径和显示
|
|
|
+ imgg: "",
|
|
|
+ img1: false,
|
|
|
+ // 临时保存当前点击行 row
|
|
|
+ currentRow: {},
|
|
|
+ };
|
|
|
},
|
|
|
- //底部右边表格更多跳转
|
|
|
- mores2() {
|
|
|
- this.$router.push("/home/page/more2");
|
|
|
+ mounted() {
|
|
|
+ this.getList();
|
|
|
+ this.noticesList();
|
|
|
+ this.msgList();
|
|
|
+ // this.loginForm.username = sessionStorage.getItem("name");
|
|
|
},
|
|
|
+ methods: {
|
|
|
+ //通知内容更多
|
|
|
+ leftMores() {
|
|
|
+ this.$router.push("/home/page/leftmores");
|
|
|
+ },
|
|
|
+ //消息内容更多
|
|
|
+ rightMores() {
|
|
|
+ this.$router.push("/home/page/rightmores");
|
|
|
+ },
|
|
|
+ //内容详细
|
|
|
+ looks(val) {
|
|
|
+ this.look1 = true;
|
|
|
+ this.details = val;
|
|
|
+ },
|
|
|
+ //中间通知列表
|
|
|
+ noticesList() {
|
|
|
+ notice().then((response) => {
|
|
|
+ this.notices = response.rows;
|
|
|
+ // console.log(response.rows);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //中间通知列表
|
|
|
+ msgList() {
|
|
|
+ msg().then((response) => {
|
|
|
+ this.msg = response.rows;
|
|
|
+ });
|
|
|
+ },
|
|
|
|
|
|
- //底部表格数据
|
|
|
- getList() {
|
|
|
- //左边表格
|
|
|
- delShare1(this.queryParams).then((response) => {
|
|
|
- // console.log(response.rows,'111111111');
|
|
|
- // 给定义的列表空数组赋值
|
|
|
- this.tableData1 = response.rows;
|
|
|
- //改变是否机密的值
|
|
|
- // var newisSecret = this.tableData1.map((item) => item.isSecret);
|
|
|
- // // console.log(a);
|
|
|
- // newisSecret = response.rows.map(
|
|
|
- // (i) => (i.isSecret = i.isSecret == 1 ? "是" : "否")
|
|
|
- // );
|
|
|
- // console.log(newisSecret);
|
|
|
- });
|
|
|
-
|
|
|
- //右边边表格
|
|
|
- delShare2(this.queryParams).then((response) => {
|
|
|
- // console.log(response.rows,'111111111');
|
|
|
- // 给定义的列表空数组赋值
|
|
|
- this.tableData2 = response.rows;
|
|
|
- // //改变是否机密的值
|
|
|
- // var newisSecret = this.tableData2.map((item) => item.isSecret);
|
|
|
- // // console.log(a);
|
|
|
- // newisSecret = response.rows.map(
|
|
|
- // (i) => (i.isSecret = i.isSecret == 1 ? "是" : "否")
|
|
|
- // );
|
|
|
- // console.log(newisSecret);
|
|
|
- });
|
|
|
- //获取文件级别数据
|
|
|
- listLevel().then((response) => {
|
|
|
- this.levelOptions = response.rows;
|
|
|
- });
|
|
|
- },
|
|
|
+ // 搜索跳转
|
|
|
+ jumpSearch() {
|
|
|
+ this.$router.push({
|
|
|
+ path: "/home/retrieval",
|
|
|
+ query: {
|
|
|
+ datas: this.input,
|
|
|
+ data2: this.type
|
|
|
+ },
|
|
|
+ });
|
|
|
+ // sessionStorage.setItem("suju", this.input);
|
|
|
+ },
|
|
|
+ //底部左边表格更多跳转
|
|
|
+ mores() {
|
|
|
+ this.$router.push("/home/page/more");
|
|
|
+ },
|
|
|
+ //底部右边表格更多跳转
|
|
|
+ mores2() {
|
|
|
+ this.$router.push("/home/page/more2");
|
|
|
+ },
|
|
|
|
|
|
- /**处理文档级别数据*/
|
|
|
- fileLevelData(row, col, value) {
|
|
|
- try {
|
|
|
- const obj = this.levelOptions.find((item) => item.levelId == value);
|
|
|
- return obj.levelName;
|
|
|
- } catch (e) {}
|
|
|
- },
|
|
|
- // 滚轮滑动放大缩小
|
|
|
- gunlun(e) {
|
|
|
- const image = this.$refs.imageRef.$el.querySelector("img");
|
|
|
- if (e.deltaY > 0) {
|
|
|
- // console.log("鼠标向下滚动，图片缩小");
|
|
|
- this.scalePercentage -= 0.1;
|
|
|
- image.style.transform = `scale(${this.scalePercentage})`;
|
|
|
- } else {
|
|
|
- // console.log("鼠标向上滚动，图片放大");
|
|
|
- this.scalePercentage += 0.1;
|
|
|
+ //底部表格数据
|
|
|
+ getList() {
|
|
|
+ //左边表格
|
|
|
+ delShare1(this.queryParams).then((response) => {
|
|
|
+ // console.log(response.rows,'111111111');
|
|
|
+ // 给定义的列表空数组赋值
|
|
|
+ this.tableData1 = response.rows;
|
|
|
+ //改变是否机密的值
|
|
|
+ // var newisSecret = this.tableData1.map((item) => item.isSecret);
|
|
|
+ // // console.log(a);
|
|
|
+ // newisSecret = response.rows.map(
|
|
|
+ // (i) => (i.isSecret = i.isSecret == 1 ? "是" : "否")
|
|
|
+ // );
|
|
|
+ // console.log(newisSecret);
|
|
|
+ });
|
|
|
+
|
|
|
+ //右边边表格
|
|
|
+ delShare2(this.queryParams).then((response) => {
|
|
|
+ // console.log(response.rows,'111111111');
|
|
|
+ // 给定义的列表空数组赋值
|
|
|
+ this.tableData2 = response.rows;
|
|
|
+ // //改变是否机密的值
|
|
|
+ // var newisSecret = this.tableData2.map((item) => item.isSecret);
|
|
|
+ // // console.log(a);
|
|
|
+ // newisSecret = response.rows.map(
|
|
|
+ // (i) => (i.isSecret = i.isSecret == 1 ? "是" : "否")
|
|
|
+ // );
|
|
|
+ // console.log(newisSecret);
|
|
|
+ });
|
|
|
+ //获取文件级别数据
|
|
|
+ listLevel().then((response) => {
|
|
|
+ this.levelOptions = response.rows;
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ /**处理文档级别数据*/
|
|
|
+ fileLevelData(row, col, value) {
|
|
|
+ try {
|
|
|
+ const obj = this.levelOptions.find((item) => item.levelId == value);
|
|
|
+ return obj.levelName;
|
|
|
+ } catch (e) {}
|
|
|
+ },
|
|
|
+ // 滚轮滑动放大缩小
|
|
|
+ gunlun(e) {
|
|
|
+ const image = this.$refs.imageRef.$el.querySelector("img");
|
|
|
+ if (e.deltaY > 0) {
|
|
|
+ // console.log("鼠标向下滚动，图片缩小");
|
|
|
+ this.scalePercentage -= 0.1;
|
|
|
+ image.style.transform = `scale(${this.scalePercentage})`;
|
|
|
+ } else {
|
|
|
+ // console.log("鼠标向上滚动，图片放大");
|
|
|
+ this.scalePercentage += 0.1;
|
|
|
+ image.style.transform = `scale(${this.scalePercentage})`;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //预览图片的缩放
|
|
|
+ rotate(angle) {
|
|
|
+ this.rotationAngle += angle;
|
|
|
+ const image = this.$refs.imageRef.$el.querySelector("img");
|
|
|
+ image.style.transform = `rotate(${this.rotationAngle}deg)`;
|
|
|
+ },
|
|
|
+ //预览图片的旋转
|
|
|
+ scale(delta) {
|
|
|
+ this.scalePercentage += delta;
|
|
|
+ const image = this.$refs.imageRef.$el.querySelector("img");
|
|
|
image.style.transform = `scale(${this.scalePercentage})`;
|
|
|
- }
|
|
|
- },
|
|
|
- //预览图片的缩放
|
|
|
- rotate(angle) {
|
|
|
- this.rotationAngle += angle;
|
|
|
- const image = this.$refs.imageRef.$el.querySelector("img");
|
|
|
- image.style.transform = `rotate(${this.rotationAngle}deg)`;
|
|
|
- },
|
|
|
- //预览图片的旋转
|
|
|
- scale(delta) {
|
|
|
- this.scalePercentage += delta;
|
|
|
- const image = this.$refs.imageRef.$el.querySelector("img");
|
|
|
- image.style.transform = `scale(${this.scalePercentage})`;
|
|
|
- },
|
|
|
+ },
|
|
|
|
|
|
- // 预览关闭
|
|
|
- gb() {
|
|
|
- this.preview = false;
|
|
|
- },
|
|
|
+ // 预览关闭
|
|
|
+ gb() {
|
|
|
+ this.preview = false;
|
|
|
+ },
|
|
|
|
|
|
- // 检验关闭
|
|
|
- // gb1() {
|
|
|
- // this.check = false;
|
|
|
- // },
|
|
|
-
|
|
|
- // 是否机密
|
|
|
- // isSecretRole(row) {
|
|
|
- // this.currentRow = row;
|
|
|
- // // console.log(`row=${row}`);
|
|
|
- // if (row.isSecret == "是") {
|
|
|
- // this.check = true;
|
|
|
- // }else{
|
|
|
- // this.handlePreview(row)
|
|
|
- // }
|
|
|
- // },
|
|
|
-
|
|
|
- //预览
|
|
|
- handlePreview(row) {
|
|
|
- // row = this.currentRow;
|
|
|
- //图片后缀名
|
|
|
- var pictures = ["jpeg", "tiff", "raw", "bmp", "gif", "png", "jpg"];
|
|
|
- //音频后缀名
|
|
|
- var audios = [
|
|
|
- "mid",
|
|
|
- "mp3",
|
|
|
- "wav",
|
|
|
- "wma",
|
|
|
- "ra",
|
|
|
- "ogg",
|
|
|
- "flac",
|
|
|
- "aac",
|
|
|
- "ape",
|
|
|
- ];
|
|
|
- //视频后缀名
|
|
|
- var videos = [
|
|
|
- "asf",
|
|
|
- "avi",
|
|
|
- "mp4",
|
|
|
- "ogm",
|
|
|
- "ifo",
|
|
|
- "mpg",
|
|
|
- "mov",
|
|
|
- "mpeg",
|
|
|
- "mpg",
|
|
|
- "vob",
|
|
|
- "wmv",
|
|
|
- "rm",
|
|
|
- "rmvb",
|
|
|
- ];
|
|
|
-
|
|
|
- //判断后缀名
|
|
|
- if (videos.some((item) => item == row.docType)) {
|
|
|
- this.preview = true;
|
|
|
- this.vid1 = true;
|
|
|
- this.aud1 = false;
|
|
|
- this.img1 = false;
|
|
|
- this.vid = row.docPath;
|
|
|
- } else if (audios.some((item) => item == row.docType)) {
|
|
|
- this.preview = true;
|
|
|
- this.aud1 = true;
|
|
|
- this.vid1 = false;
|
|
|
- this.img1 = false;
|
|
|
- this.aud = row.docPath;
|
|
|
- } else if (pictures.some((item) => item == row.docType)) {
|
|
|
- this.preview = true;
|
|
|
- this.aud1 = false;
|
|
|
- this.vid1 = false;
|
|
|
- this.img1 = true;
|
|
|
- this.imgg = row.docPath;
|
|
|
- } else {
|
|
|
- row.isEdit = false;
|
|
|
- this.$tab.openPage(
|
|
|
- window.open(
|
|
|
- "/individual/Pre/user/" + row.docId + "?row=" + JSON.stringify(row),
|
|
|
- "_blank"
|
|
|
- )
|
|
|
- );
|
|
|
- }
|
|
|
+ // 检验关闭
|
|
|
+ // gb1() {
|
|
|
+ // this.check = false;
|
|
|
+ // },
|
|
|
+
|
|
|
+ // 是否机密
|
|
|
+ // isSecretRole(row) {
|
|
|
+ // this.currentRow = row;
|
|
|
+ // // console.log(`row=${row}`);
|
|
|
+ // if (row.isSecret == "是") {
|
|
|
+ // this.check = true;
|
|
|
+ // }else{
|
|
|
+ // this.handlePreview(row)
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+
|
|
|
+ //预览
|
|
|
+ handlePreview(row) {
|
|
|
+ // row = this.currentRow;
|
|
|
+ //图片后缀名
|
|
|
+ var pictures = ["jpeg", "tiff", "raw", "bmp", "gif", "png", "jpg"];
|
|
|
+ //音频后缀名
|
|
|
+ var audios = [
|
|
|
+ "mid",
|
|
|
+ "mp3",
|
|
|
+ "wav",
|
|
|
+ "wma",
|
|
|
+ "ra",
|
|
|
+ "ogg",
|
|
|
+ "flac",
|
|
|
+ "aac",
|
|
|
+ "ape",
|
|
|
+ ];
|
|
|
+ //视频后缀名
|
|
|
+ var videos = [
|
|
|
+ "asf",
|
|
|
+ "avi",
|
|
|
+ "mp4",
|
|
|
+ "ogm",
|
|
|
+ "ifo",
|
|
|
+ "mpg",
|
|
|
+ "mov",
|
|
|
+ "mpeg",
|
|
|
+ "mpg",
|
|
|
+ "vob",
|
|
|
+ "wmv",
|
|
|
+ "rm",
|
|
|
+ "rmvb",
|
|
|
+ ];
|
|
|
+
|
|
|
+ //判断后缀名
|
|
|
+ if (videos.some((item) => item == row.docType)) {
|
|
|
+ this.preview = true;
|
|
|
+ this.vid1 = true;
|
|
|
+ this.aud1 = false;
|
|
|
+ this.img1 = false;
|
|
|
+ this.vid = row.docPath;
|
|
|
+ } else if (audios.some((item) => item == row.docType)) {
|
|
|
+ this.preview = true;
|
|
|
+ this.aud1 = true;
|
|
|
+ this.vid1 = false;
|
|
|
+ this.img1 = false;
|
|
|
+ this.aud = row.docPath;
|
|
|
+ } else if (pictures.some((item) => item == row.docType)) {
|
|
|
+ this.preview = true;
|
|
|
+ this.aud1 = false;
|
|
|
+ this.vid1 = false;
|
|
|
+ this.img1 = true;
|
|
|
+ this.imgg = row.docPath;
|
|
|
+ } else if (officeType.some(item => item == row.docType)) {
|
|
|
+ row.isEdit = false;
|
|
|
+ this.$tab.openPage(
|
|
|
+ window.open('/individual/Pre/user/' + row.docId + "?row=" + JSON.stringify(row),
|
|
|
+ '_blank'),
|
|
|
+ // window.open("/individual/Pre/user/" + row.docId +"/title/"+ row.docName, '_blank'),
|
|
|
+ );
|
|
|
+ // console.log(111);
|
|
|
+ } else {
|
|
|
+ this.$modal.msgWarning("该文件不支持预览");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //验证账号密码
|
|
|
+ // getCookie() {
|
|
|
+ // const username = Cookies.get("username");
|
|
|
+ // const password = Cookies.get("password");
|
|
|
+ // const rememberMe = Cookies.get("rememberMe");
|
|
|
+ // this.loginForm = {
|
|
|
+ // username: username === undefined ? this.loginForm.username : username,
|
|
|
+ // password:
|
|
|
+ // password === undefined ? this.loginForm.password : decrypt(password),
|
|
|
+ // rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
|
|
|
+ // };
|
|
|
+ // },
|
|
|
+
|
|
|
+ //验证账号密码
|
|
|
+ // submitForm(row) {
|
|
|
+ // this.$refs.loginForm.validate((valid) => {
|
|
|
+ // if (valid) {
|
|
|
+ // if (this.loginForm.rememberMe) {
|
|
|
+ // Cookies.set("username", this.loginForm.username, { expires: 30 });
|
|
|
+ // Cookies.set("password", encrypt(this.loginForm.password), {
|
|
|
+ // expires: 30,
|
|
|
+ // });
|
|
|
+ // } else {
|
|
|
+ // Cookies.remove("username");
|
|
|
+ // Cookies.remove("password");
|
|
|
+ // }
|
|
|
+ // this.$store
|
|
|
+ // .dispatch("Login", this.loginForm)
|
|
|
+ // .then(() => {
|
|
|
+ // // 登录成功
|
|
|
+ // this.currentLoginStatus = 1;
|
|
|
+ // // 关闭登录界面
|
|
|
+ // this.check = false;
|
|
|
+ // // console.log("登录成功", "关闭登录界面");
|
|
|
+
|
|
|
+ // // console.log("预览界面");
|
|
|
+ // this.handlePreview(row);
|
|
|
+ // })
|
|
|
+ // .catch(() => {
|
|
|
+ // this.currentLoginStatus = 0;
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // },
|
|
|
},
|
|
|
- //验证账号密码
|
|
|
- // getCookie() {
|
|
|
- // const username = Cookies.get("username");
|
|
|
- // const password = Cookies.get("password");
|
|
|
- // const rememberMe = Cookies.get("rememberMe");
|
|
|
- // this.loginForm = {
|
|
|
- // username: username === undefined ? this.loginForm.username : username,
|
|
|
- // password:
|
|
|
- // password === undefined ? this.loginForm.password : decrypt(password),
|
|
|
- // rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
|
|
|
- // };
|
|
|
- // },
|
|
|
-
|
|
|
- //验证账号密码
|
|
|
- // submitForm(row) {
|
|
|
- // this.$refs.loginForm.validate((valid) => {
|
|
|
- // if (valid) {
|
|
|
- // if (this.loginForm.rememberMe) {
|
|
|
- // Cookies.set("username", this.loginForm.username, { expires: 30 });
|
|
|
- // Cookies.set("password", encrypt(this.loginForm.password), {
|
|
|
- // expires: 30,
|
|
|
- // });
|
|
|
- // } else {
|
|
|
- // Cookies.remove("username");
|
|
|
- // Cookies.remove("password");
|
|
|
- // }
|
|
|
- // this.$store
|
|
|
- // .dispatch("Login", this.loginForm)
|
|
|
- // .then(() => {
|
|
|
- // // 登录成功
|
|
|
- // this.currentLoginStatus = 1;
|
|
|
- // // 关闭登录界面
|
|
|
- // this.check = false;
|
|
|
- // // console.log("登录成功", "关闭登录界面");
|
|
|
-
|
|
|
- // // console.log("预览界面");
|
|
|
- // this.handlePreview(row);
|
|
|
- // })
|
|
|
- // .catch(() => {
|
|
|
- // this.currentLoginStatus = 0;
|
|
|
- // });
|
|
|
- // }
|
|
|
- // });
|
|
|
- // },
|
|
|
- },
|
|
|
-};
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang='scss'>
|
|
|
-.containe {
|
|
|
- color: #7ea4c8ff;
|
|
|
- font-size: 0.14rem;
|
|
|
- font-family: PingFang SC-Medium, PingFang SC;
|
|
|
- background: url(../../assets/img/background.png);
|
|
|
- background-size: 100% 100%;
|
|
|
- padding-top: calc(100vh * (50 / 1080));
|
|
|
- .top {
|
|
|
- width: 100%;
|
|
|
- height: calc(100vh * (600 / 1080));
|
|
|
- padding-left: calc(100vw * (34 / 1920));
|
|
|
- padding-right: calc(100vw * (30 / 1920));
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- .left {
|
|
|
- //滚动条样式
|
|
|
- ::-webkit-scrollbar {
|
|
|
- width: 3.5px;
|
|
|
- }
|
|
|
- ::-webkit-scrollbar-track {
|
|
|
- background-color: rgba(0, 0, 0, 0);
|
|
|
- }
|
|
|
- ::-webkit-scrollbar-thumb {
|
|
|
- background: #2e8aec;
|
|
|
- border-radius: 3px;
|
|
|
- }
|
|
|
- ::-webkit-scrollbar-thumb:hover {
|
|
|
- background: #2e8aec;
|
|
|
+ .containe {
|
|
|
+ color: #7ea4c8ff;
|
|
|
+ font-size: 0.14rem;
|
|
|
+ font-family: PingFang SC-Medium, PingFang SC;
|
|
|
+ background: url(../../assets/img/background.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding-top: calc(100vh * (50 / 1080));
|
|
|
+
|
|
|
+ .top {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vh * (600 / 1080));
|
|
|
+ padding-left: calc(100vw * (34 / 1920));
|
|
|
+ padding-right: calc(100vw * (30 / 1920));
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .left {
|
|
|
+
|
|
|
+ //滚动条样式
|
|
|
+ ::-webkit-scrollbar {
|
|
|
+ width: 3.5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::-webkit-scrollbar-track {
|
|
|
+ background-color: rgba(0, 0, 0, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ ::-webkit-scrollbar-thumb {
|
|
|
+ background: #2e8aec;
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::-webkit-scrollbar-thumb:hover {
|
|
|
+ background: #2e8aec;
|
|
|
+ }
|
|
|
+
|
|
|
+ width: calc(100vw * (395 / 1920));
|
|
|
+ height: calc(100vh * (568 / 1080));
|
|
|
+ background: url(../../assets/img/main_BG_left.png);
|
|
|
+ background-size: calc(100vw * (395 / 1920)) calc(100vh * (568 / 1080));
|
|
|
+ padding-left: 10px;
|
|
|
+ padding-top: 5px;
|
|
|
+
|
|
|
+ .left1 {
|
|
|
+ width: calc(100vw * (375 / 1920));
|
|
|
+ height: calc(100vh * (556 / 1080));
|
|
|
+
|
|
|
+ .left-top {
|
|
|
+ width: calc(100vw * (365 / 1920));
|
|
|
+ height: calc(100vh * (40 / 1080));
|
|
|
+ margin-top: 5px;
|
|
|
+ padding-left: calc(100vw * (20 / 1920));
|
|
|
+ padding-right: calc(100vw * (20 / 1920));
|
|
|
+ background: url(../../assets/img/main_left_decorate.png);
|
|
|
+ background-size: calc(100vw * (365 / 1920)) calc(100vh * (40 / 1080));
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ h3 {
|
|
|
+ font-weight: bold;
|
|
|
+ font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ padding-right: 10px;
|
|
|
+ color: #2e8aecff;
|
|
|
+ font-family: PingFang SC-Medium;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .left-main {
|
|
|
+ width: calc(100vw * (365 / 1920));
|
|
|
+ height: calc(100vh * (480 / 1080));
|
|
|
+ list-style: none;
|
|
|
+ padding: 0;
|
|
|
+ margin-top: calc(100vh * (10 / 1080));
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ li {
|
|
|
+ width: calc(100vw * (360 / 1920));
|
|
|
+ height: calc(100vh * (230 / 1080));
|
|
|
+ background: rgba(18, 32, 80, 0.4);
|
|
|
+ border-radius: 2px 2px 2px 2px;
|
|
|
+ opacity: 1;
|
|
|
+ margin-bottom: calc(100vh * (10 / 1080));
|
|
|
+
|
|
|
+ div {
|
|
|
+ padding-top: 8px;
|
|
|
+ padding-left: 20px;
|
|
|
+ padding-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .one {
|
|
|
+ padding-top: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .three {
|
|
|
+ padding-left: calc(100vw * (6 / 1920));
|
|
|
+ padding-right: calc(100vw * (6 / 1920));
|
|
|
+ }
|
|
|
+
|
|
|
+ .five {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ color: #2e8aecff;
|
|
|
+ padding-top: calc(100vh * (20 / 1080));
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .four {
|
|
|
+ display: flex;
|
|
|
+ padding-top: calc(100vh * (10 / 1080));
|
|
|
+
|
|
|
+ .four1 {
|
|
|
+ width: calc(100vw * (60 / 1920));
|
|
|
+ }
|
|
|
+
|
|
|
+ .four2 {
|
|
|
+ width: calc(100vw * (250 / 1920));
|
|
|
+ height: calc(100vh * (55 / 1080));
|
|
|
+ // background: salmon;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -webkit-line-clamp: 3;
|
|
|
+ word-break: break-all;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- width: calc(100vw * (395 / 1920));
|
|
|
- height: calc(100vh * (568 / 1080));
|
|
|
- background: url(../../assets/img/main_BG_left.png);
|
|
|
- background-size: calc(100vw * (395 / 1920)) calc(100vh * (568 / 1080));
|
|
|
- padding-left: 10px;
|
|
|
- padding-top: 5px;
|
|
|
- .left1 {
|
|
|
- width: calc(100vw * (375 / 1920));
|
|
|
- height: calc(100vh * (556 / 1080));
|
|
|
- .left-top {
|
|
|
+
|
|
|
+ .right {
|
|
|
+
|
|
|
+ //滚动条样式
|
|
|
+ ::-webkit-scrollbar {
|
|
|
+ width: 3.5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::-webkit-scrollbar-track {
|
|
|
+ background-color: rgba(0, 0, 0, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ ::-webkit-scrollbar-thumb {
|
|
|
+ background: #2e8aec;
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::-webkit-scrollbar-thumb:hover {
|
|
|
+ background: #2e8aec;
|
|
|
+ }
|
|
|
+
|
|
|
+ width: calc(100vw * (395 / 1920));
|
|
|
+ height: calc(100vh * (568 / 1080));
|
|
|
+ background: url(../../assets/img/main_BG_left.png);
|
|
|
+ background-size: calc(100vw * (395 / 1920)) calc(100vh * (568 / 1080));
|
|
|
+ padding-left: 10px;
|
|
|
+ padding-top: 5px;
|
|
|
+
|
|
|
+ .right1 {
|
|
|
+ width: calc(100vw * (375 / 1920));
|
|
|
+ height: calc(100vh * (556 / 1080));
|
|
|
+
|
|
|
+ .right-top {
|
|
|
+ width: calc(100vw * (365 / 1920));
|
|
|
+ height: calc(100vh * (40 / 1080));
|
|
|
+ margin-top: 5px;
|
|
|
+ padding-left: calc(100vw * (20 / 1920));
|
|
|
+ padding-right: calc(100vw * (20 / 1920));
|
|
|
+ background: url(../../assets/img/main_left_decorate.png);
|
|
|
+ background-size: calc(100vw * (365 / 1920)) calc(100vh * (40 / 1080));
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ h3 {
|
|
|
+ font-weight: bold;
|
|
|
+ font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ padding-right: 10px;
|
|
|
+ color: #2e8aecff;
|
|
|
+ font-family: PingFang SC-Medium;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-main {
|
|
|
width: calc(100vw * (365 / 1920));
|
|
|
+ height: calc(100vh * (480 / 1080));
|
|
|
+ list-style: none;
|
|
|
+ padding: 0;
|
|
|
+ margin-top: calc(100vh * (10 / 1080));
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ li {
|
|
|
+ width: calc(100vw * (360 / 1920));
|
|
|
+ height: calc(100vh * (230 / 1080));
|
|
|
+ background: rgba(18, 32, 80, 0.4);
|
|
|
+ border-radius: 2px 2px 2px 2px;
|
|
|
+ opacity: 1;
|
|
|
+ margin-bottom: calc(100vh * (10 / 1080));
|
|
|
+
|
|
|
+ div {
|
|
|
+ padding-top: 8px;
|
|
|
+ padding-left: 20px;
|
|
|
+ padding-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .one {
|
|
|
+ padding-top: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .three {
|
|
|
+ padding-left: calc(100vw * (6 / 1920));
|
|
|
+ padding-right: calc(100vw * (6 / 1920));
|
|
|
+ }
|
|
|
+
|
|
|
+ .five {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ color: #2e8aecff;
|
|
|
+ padding-top: calc(100vh * (20 / 1080));
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .four {
|
|
|
+ display: flex;
|
|
|
+ padding-top: calc(100vh * (10 / 1080));
|
|
|
+
|
|
|
+ .four1 {
|
|
|
+ width: calc(100vw * (60 / 1920));
|
|
|
+ }
|
|
|
+
|
|
|
+ .four2 {
|
|
|
+ width: calc(100vw * (250 / 1920));
|
|
|
+ height: calc(100vh * (55 / 1080));
|
|
|
+ // background: salmon;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -webkit-line-clamp: 3;
|
|
|
+ word-break: break-all;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cen {
|
|
|
+ width: calc(100vw * (804 / 1920));
|
|
|
+ height: calc(100vh * (600 / 1080));
|
|
|
+ // background: aqua;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .cen—top {
|
|
|
+ width: calc(100vw * (700 / 1920));
|
|
|
height: calc(100vh * (40 / 1080));
|
|
|
- margin-top: 5px;
|
|
|
- padding-left: calc(100vw * (20 / 1920));
|
|
|
- padding-right: calc(100vw * (20 / 1920));
|
|
|
- background: url(../../assets/img/main_left_decorate.png);
|
|
|
- background-size: calc(100vw * (365 / 1920)) calc(100vh * (40 / 1080));
|
|
|
+ // background: salmon;
|
|
|
+ // overflow: hidden;
|
|
|
+ margin-left: calc(100vw * (61 / 1920));
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- h3 {
|
|
|
- font-weight: bold;
|
|
|
- font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- p {
|
|
|
- padding-right: 10px;
|
|
|
+
|
|
|
+ .cen—top-left {
|
|
|
+ width: calc(100vw * (130 / 1920));
|
|
|
+ height: calc(100vh * (36 / 1080));
|
|
|
+ // background: seagreen;
|
|
|
+ margin-right: calc(100vw * (5 / 1920));
|
|
|
+ font-size: 12px;
|
|
|
color: #2e8aecff;
|
|
|
- font-family: PingFang SC-Medium;
|
|
|
- &:hover {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ ::v-deep .el-input--medium .el-input__inner {
|
|
|
+ height: 26px;
|
|
|
+ line-height: 26px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .el-input__suffix {
|
|
|
+ height: 120%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dropdown-link {
|
|
|
cursor: pointer;
|
|
|
+ color: #409eff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-icon-arrow-down {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cen—top-right {
|
|
|
+ width: calc(100vw * (526 / 1920));
|
|
|
+ height: calc(100vh * (36 / 1080));
|
|
|
+
|
|
|
+ // margin-left: calc(100vw * (60 / 1920));
|
|
|
+ // background: skyblue;
|
|
|
+ .cen—top-div {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .cen—top-img {
|
|
|
+ // background-size: calc(100vw * (24 / 1920)) calc(100vh * (24/ 1080));
|
|
|
+ width: calc(100vw * (24 / 1920));
|
|
|
+ height: calc(100vh * (24 / 1080));
|
|
|
+ position: absolute;
|
|
|
+ left: calc(100vw * (15 / 1920));
|
|
|
+ top: calc(100vh * (7 / 1080));
|
|
|
+ }
|
|
|
+
|
|
|
+ .searchs {
|
|
|
+ width: calc(100vw * (420 / 1920));
|
|
|
+
|
|
|
+ ::v-deep .el-input__inner {
|
|
|
+ height: calc(100vh * (36 / 1080)) !important;
|
|
|
+ padding-left: calc(100vw * (50 / 1920));
|
|
|
+ background: #14265e80;
|
|
|
+ border: 1px solid #01d1ffff;
|
|
|
+ color: #7ea4c8ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cen—top-but {
|
|
|
+ width: calc(100vw * (100 / 1920));
|
|
|
+ height: calc(100vh * (36 / 1080));
|
|
|
+ display: inline-block;
|
|
|
+ text-align: center;
|
|
|
+ line-height: calc(100vh * (36 / 1080));
|
|
|
+ background: #01d1ff80;
|
|
|
+ color: #ffffffcc;
|
|
|
+ vertical-align: top;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .left-main {
|
|
|
- width: calc(100vw * (365 / 1920));
|
|
|
- height: calc(100vh * (480 / 1080));
|
|
|
- list-style: none;
|
|
|
- padding: 0;
|
|
|
- margin-top: calc(100vh * (10 / 1080));
|
|
|
- overflow: auto;
|
|
|
- li {
|
|
|
- width: calc(100vw * (360 / 1920));
|
|
|
- height: calc(100vh * (230 / 1080));
|
|
|
- background: rgba(18, 32, 80, 0.4);
|
|
|
- border-radius: 2px 2px 2px 2px;
|
|
|
- opacity: 1;
|
|
|
- margin-bottom: calc(100vh * (10 / 1080));
|
|
|
- div {
|
|
|
- padding-top: 8px;
|
|
|
- padding-left: 20px;
|
|
|
- padding-right: 5px;
|
|
|
+
|
|
|
+ .cen—bottom {
|
|
|
+ width: calc(100vw * (784 / 1920));
|
|
|
+ height: calc(100vh * (477 / 1080));
|
|
|
+ background: url(../../assets/img/MMB.png);
|
|
|
+ background-size: calc(100vw * (784 / 1920)) calc(100vh * (477 / 1080));
|
|
|
+ margin-top: calc(100vh * (80 / 1080));
|
|
|
+ position: relative;
|
|
|
+ font-size: 0.18rem;
|
|
|
+ color: #ffffffff;
|
|
|
+ font-weight: 400;
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-size: 0.18rem;
|
|
|
+ font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
+
|
|
|
.one {
|
|
|
- padding-top: 12px;
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ left: calc(100vw * (172 / 1920));
|
|
|
+ top: -30px;
|
|
|
+ width: calc(100vw * (140 / 1920));
|
|
|
+ height: calc(100vh * (153 / 1080));
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vh * (130 / 1080));
|
|
|
+ }
|
|
|
}
|
|
|
- .three {
|
|
|
- padding-left: calc(100vw * (6 / 1920));
|
|
|
- padding-right: calc(100vw * (6 / 1920));
|
|
|
+
|
|
|
+ .two {
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ left: calc(100vw * (442 / 1920));
|
|
|
+ top: -30px;
|
|
|
+ width: calc(100vw * (140 / 1920));
|
|
|
+ height: calc(100vh * (153 / 1080));
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vh * (130 / 1080));
|
|
|
+ }
|
|
|
}
|
|
|
- .five {
|
|
|
+
|
|
|
+ .three {
|
|
|
display: flex;
|
|
|
- justify-content: space-evenly;
|
|
|
- color: #2e8aecff;
|
|
|
- padding-top: calc(100vh * (20 / 1080));
|
|
|
- &:hover {
|
|
|
- cursor: pointer;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ left: calc(100vw * (36 / 1920));
|
|
|
+ top: calc(100vh * (150 / 1080));
|
|
|
+ width: calc(100vw * (140 / 1920));
|
|
|
+ height: calc(100vh * (153 / 1080));
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vh * (130 / 1080));
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.four {
|
|
|
display: flex;
|
|
|
- padding-top: calc(100vh * (10 / 1080));
|
|
|
- .four1 {
|
|
|
- width: calc(100vw * (60 / 1920));
|
|
|
- }
|
|
|
- .four2 {
|
|
|
- width: calc(100vw * (250 / 1920));
|
|
|
- height: calc(100vh * (55 / 1080));
|
|
|
- // background: salmon;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- -webkit-line-clamp: 3;
|
|
|
- word-break: break-all;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ right: calc(100vw * (57 / 1920));
|
|
|
+ top: calc(100vh * (150 / 1080));
|
|
|
+ width: calc(100vw * (140 / 1920));
|
|
|
+ height: calc(100vh * (153 / 1080));
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vh * (130 / 1080));
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .right {
|
|
|
- //滚动条样式
|
|
|
- ::-webkit-scrollbar {
|
|
|
- width: 3.5px;
|
|
|
- }
|
|
|
- ::-webkit-scrollbar-track {
|
|
|
- background-color: rgba(0, 0, 0, 0);
|
|
|
- }
|
|
|
- ::-webkit-scrollbar-thumb {
|
|
|
- background: #2e8aec;
|
|
|
- border-radius: 3px;
|
|
|
- }
|
|
|
- ::-webkit-scrollbar-thumb:hover {
|
|
|
- background: #2e8aec;
|
|
|
- }
|
|
|
- width: calc(100vw * (395 / 1920));
|
|
|
- height: calc(100vh * (568 / 1080));
|
|
|
- background: url(../../assets/img/main_BG_left.png);
|
|
|
- background-size: calc(100vw * (395 / 1920)) calc(100vh * (568 / 1080));
|
|
|
- padding-left: 10px;
|
|
|
- padding-top: 5px;
|
|
|
- .right1 {
|
|
|
- width: calc(100vw * (375 / 1920));
|
|
|
- height: calc(100vh * (556 / 1080));
|
|
|
- .right-top {
|
|
|
- width: calc(100vw * (365 / 1920));
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vh * (304 / 1080));
|
|
|
+ background-size: cover;
|
|
|
+ margin-top: calc(100vh * (30 / 1080));
|
|
|
+ padding-left: calc(100vw * (30 / 1920));
|
|
|
+ padding-right: calc(100vw * (34 / 1920));
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ width: calc(100vw * (920 / 1920));
|
|
|
+ height: calc(100vh * (304 / 1080));
|
|
|
+ background: url(../../assets/img/footer.png);
|
|
|
+ background-size: calc(100vw * (920 / 1920)) calc(100vh * (304 / 1080));
|
|
|
+ padding-left: 10px;
|
|
|
+
|
|
|
+ .left-top {
|
|
|
+ width: calc(100vw * (880 / 1920));
|
|
|
height: calc(100vh * (40 / 1080));
|
|
|
- margin-top: 5px;
|
|
|
- padding-left: calc(100vw * (20 / 1920));
|
|
|
- padding-right: calc(100vw * (20 / 1920));
|
|
|
+ color: #ffffff;
|
|
|
+ margin-top: 10px;
|
|
|
background: url(../../assets/img/main_left_decorate.png);
|
|
|
- background-size: calc(100vw * (365 / 1920)) calc(100vh * (40 / 1080));
|
|
|
+ background-size: calc(100vw * (880 / 1920)) calc(100vh * (40 / 1080));
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
+
|
|
|
h3 {
|
|
|
+ padding-left: 10px;
|
|
|
+ font-size: 0.2rem;
|
|
|
font-weight: bold;
|
|
|
font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
|
|
|
- color: #ffffff;
|
|
|
}
|
|
|
+
|
|
|
p {
|
|
|
padding-right: 10px;
|
|
|
+ font-size: 0.2rem;
|
|
|
color: #2e8aecff;
|
|
|
font-family: PingFang SC-Medium;
|
|
|
+
|
|
|
&:hover {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .right-main {
|
|
|
- width: calc(100vw * (365 / 1920));
|
|
|
- height: calc(100vh * (480 / 1080));
|
|
|
- list-style: none;
|
|
|
- padding: 0;
|
|
|
- margin-top: calc(100vh * (10 / 1080));
|
|
|
- overflow: auto;
|
|
|
- li {
|
|
|
- width: calc(100vw * (360 / 1920));
|
|
|
+
|
|
|
+ .left-main {
|
|
|
+ margin-top: calc(100vh * (8 / 1080));
|
|
|
+ color: #7ea4c8ff;
|
|
|
+ background: transparent;
|
|
|
height: calc(100vh * (230 / 1080));
|
|
|
- background: rgba(18, 32, 80, 0.4);
|
|
|
- border-radius: 2px 2px 2px 2px;
|
|
|
- opacity: 1;
|
|
|
- margin-bottom: calc(100vh * (10 / 1080));
|
|
|
- div {
|
|
|
- padding-top: 8px;
|
|
|
- padding-left: 20px;
|
|
|
- padding-right: 5px;
|
|
|
- }
|
|
|
- .one {
|
|
|
- padding-top: 12px;
|
|
|
- }
|
|
|
- .three {
|
|
|
- padding-left: calc(100vw * (6 / 1920));
|
|
|
- padding-right: calc(100vw * (6 / 1920));
|
|
|
- }
|
|
|
- .five {
|
|
|
- display: flex;
|
|
|
- justify-content: space-evenly;
|
|
|
- color: #2e8aecff;
|
|
|
- padding-top: calc(100vh * (20 / 1080));
|
|
|
- &:hover {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
- .four {
|
|
|
- display: flex;
|
|
|
- padding-top: calc(100vh * (10 / 1080));
|
|
|
- .four1 {
|
|
|
- width: calc(100vw * (60 / 1920));
|
|
|
- }
|
|
|
- .four2 {
|
|
|
- width: calc(100vw * (250 / 1920));
|
|
|
- height: calc(100vh * (55 / 1080));
|
|
|
- // background: salmon;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- -webkit-line-clamp: 3;
|
|
|
- word-break: break-all;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- }
|
|
|
- }
|
|
|
+ // overflow: auto;
|
|
|
+ font-size: 0.14rem;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- .cen {
|
|
|
- width: calc(100vw * (804 / 1920));
|
|
|
- height: calc(100vh * (600 / 1080));
|
|
|
- // background: aqua;
|
|
|
- position: relative;
|
|
|
- .cen—top {
|
|
|
- width: calc(100vw * (700 / 1920));
|
|
|
- height: calc(100vh * (40 / 1080));
|
|
|
- // background: salmon;
|
|
|
- // overflow: hidden;
|
|
|
- margin-left: calc(100vw * (61 / 1920));
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .cen—top-left {
|
|
|
- width: calc(100vw * (130 / 1920));
|
|
|
- height: calc(100vh * (36 / 1080));
|
|
|
- // background: seagreen;
|
|
|
- margin-right: calc(100vw * (5 / 1920));
|
|
|
- font-size: 12px;
|
|
|
- color: #2e8aecff;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- ::v-deep .el-input--medium .el-input__inner{
|
|
|
- height: 26px;
|
|
|
- line-height: 26px;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- ::v-deep .el-input__suffix{
|
|
|
- height: 120%;
|
|
|
- }
|
|
|
- .el-dropdown-link {
|
|
|
- cursor: pointer;
|
|
|
- color: #409eff;
|
|
|
- }
|
|
|
- .el-icon-arrow-down {
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
+
|
|
|
+ //滚动条样式
|
|
|
+ ::-webkit-scrollbar {
|
|
|
+ width: 3.5px;
|
|
|
}
|
|
|
- .cen—top-right {
|
|
|
- width: calc(100vw * (526 / 1920));
|
|
|
- height: calc(100vh * (36 / 1080));
|
|
|
- // margin-left: calc(100vw * (60 / 1920));
|
|
|
- // background: skyblue;
|
|
|
- .cen—top-div {
|
|
|
- position: relative;
|
|
|
- .cen—top-img {
|
|
|
- // background-size: calc(100vw * (24 / 1920)) calc(100vh * (24/ 1080));
|
|
|
- width: calc(100vw * (24 / 1920));
|
|
|
- height: calc(100vh * (24 / 1080));
|
|
|
- position: absolute;
|
|
|
- left: calc(100vw * (15 / 1920));
|
|
|
- top: calc(100vh * (7 / 1080));
|
|
|
- }
|
|
|
- .searchs {
|
|
|
- width: calc(100vw * (420 / 1920));
|
|
|
- ::v-deep .el-input__inner {
|
|
|
- height: calc(100vh * (36 / 1080)) !important;
|
|
|
- padding-left: calc(100vw * (50 / 1920));
|
|
|
- background: #14265e80;
|
|
|
- border: 1px solid #01d1ffff;
|
|
|
- color: #7ea4c8ff;
|
|
|
- }
|
|
|
- }
|
|
|
- .cen—top-but {
|
|
|
- width: calc(100vw * (100 / 1920));
|
|
|
- height: calc(100vh * (36 / 1080));
|
|
|
- display: inline-block;
|
|
|
- text-align: center;
|
|
|
- line-height: calc(100vh * (36 / 1080));
|
|
|
- background: #01d1ff80;
|
|
|
- color: #ffffffcc;
|
|
|
- vertical-align: top;
|
|
|
- &:hover {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
+ ::-webkit-scrollbar-track {
|
|
|
+ background-color: rgba(0, 0, 0, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ ::-webkit-scrollbar-thumb {
|
|
|
+ background: #2e8aec;
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::-webkit-scrollbar-thumb:hover {
|
|
|
+ background: #2e8aec;
|
|
|
}
|
|
|
}
|
|
|
- .cen—bottom {
|
|
|
- width: calc(100vw * (784 / 1920));
|
|
|
- height: calc(100vh * (477 / 1080));
|
|
|
- background: url(../../assets/img/MMB.png);
|
|
|
- background-size: calc(100vw * (784 / 1920)) calc(100vh * (477 / 1080));
|
|
|
- margin-top: calc(100vh * (80 / 1080));
|
|
|
- position: relative;
|
|
|
- font-size: 0.18rem;
|
|
|
- color: #ffffffff;
|
|
|
- font-weight: 400;
|
|
|
- p {
|
|
|
- font-size: 0.18rem;
|
|
|
- font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
|
|
|
- font-weight: bold;
|
|
|
+
|
|
|
+ .right {
|
|
|
+ width: calc(100vw * (920 / 1920));
|
|
|
+ height: calc(100vh * (304 / 1080));
|
|
|
+ background: url(../../assets/img/footer.png);
|
|
|
+ background-size: calc(100vw * (920 / 1920)) calc(100vh * (304 / 1080));
|
|
|
+ padding-left: 10px;
|
|
|
+
|
|
|
+ .right-top {
|
|
|
+ width: calc(100vw * (880 / 1920));
|
|
|
+ height: calc(100vh * (40 / 1080));
|
|
|
color: #ffffff;
|
|
|
- }
|
|
|
- .one {
|
|
|
- position: absolute;
|
|
|
+ margin-top: 10px;
|
|
|
+ background: url(../../assets/img/main_left_decorate.png);
|
|
|
+ background-size: calc(100vw * (880 / 1920)) calc(100vh * (40 / 1080));
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- left: calc(100vw * (172 / 1920));
|
|
|
- top: -30px;
|
|
|
- width: calc(100vw * (140 / 1920));
|
|
|
- height: calc(100vh * (153 / 1080));
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- height: calc(100vh * (130 / 1080));
|
|
|
+
|
|
|
+ h3 {
|
|
|
+ padding-left: 10px;
|
|
|
+ font-size: 0.2rem;
|
|
|
+ font-weight: bold;
|
|
|
+ font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
|
|
|
}
|
|
|
- }
|
|
|
- .two {
|
|
|
- position: absolute;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- left: calc(100vw * (442 / 1920));
|
|
|
- top: -30px;
|
|
|
- width: calc(100vw * (140 / 1920));
|
|
|
- height: calc(100vh * (153 / 1080));
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- height: calc(100vh * (130 / 1080));
|
|
|
+
|
|
|
+ p {
|
|
|
+ padding-right: 10px;
|
|
|
+ font-size: 0.2rem;
|
|
|
+ color: #2e8aecff;
|
|
|
+ font-family: PingFang SC-Medium;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- .three {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- position: absolute;
|
|
|
- left: calc(100vw * (36 / 1920));
|
|
|
- top: calc(100vh * (150 / 1080));
|
|
|
- width: calc(100vw * (140 / 1920));
|
|
|
- height: calc(100vh * (153 / 1080));
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- height: calc(100vh * (130 / 1080));
|
|
|
- }
|
|
|
+
|
|
|
+ .right-main {
|
|
|
+ margin-top: calc(100vh * (8 / 1080));
|
|
|
+ color: #7ea4c8ff;
|
|
|
+ background: transparent;
|
|
|
+ height: calc(100vh * (230 / 1080));
|
|
|
+ // overflow: auto;
|
|
|
+ font-size: 0.14rem;
|
|
|
}
|
|
|
- .four {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- position: absolute;
|
|
|
- right: calc(100vw * (57 / 1920));
|
|
|
- top: calc(100vh * (150 / 1080));
|
|
|
- width: calc(100vw * (140 / 1920));
|
|
|
- height: calc(100vh * (153 / 1080));
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- height: calc(100vh * (130 / 1080));
|
|
|
- }
|
|
|
+
|
|
|
+ //滚动条样式
|
|
|
+ ::-webkit-scrollbar {
|
|
|
+ width: 3.5px;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .bottom {
|
|
|
- width: 100%;
|
|
|
- height: calc(100vh * (304 / 1080));
|
|
|
- background-size: cover;
|
|
|
- margin-top: calc(100vh * (30 / 1080));
|
|
|
- padding-left: calc(100vw * (30 / 1920));
|
|
|
- padding-right: calc(100vw * (34 / 1920));
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- .left {
|
|
|
- width: calc(100vw * (920 / 1920));
|
|
|
- height: calc(100vh * (304 / 1080));
|
|
|
- background: url(../../assets/img/footer.png);
|
|
|
- background-size: calc(100vw * (920 / 1920)) calc(100vh * (304 / 1080));
|
|
|
- padding-left: 10px;
|
|
|
- .left-top {
|
|
|
- width: calc(100vw * (880 / 1920));
|
|
|
- height: calc(100vh * (40 / 1080));
|
|
|
- color: #ffffff;
|
|
|
- margin-top: 10px;
|
|
|
- background: url(../../assets/img/main_left_decorate.png);
|
|
|
- background-size: calc(100vw * (880 / 1920)) calc(100vh * (40 / 1080));
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- h3 {
|
|
|
- padding-left: 10px;
|
|
|
- font-size: 0.2rem;
|
|
|
- font-weight: bold;
|
|
|
- font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
|
|
|
+
|
|
|
+ ::-webkit-scrollbar-track {
|
|
|
+ background-color: rgba(0, 0, 0, 0);
|
|
|
}
|
|
|
- p {
|
|
|
- padding-right: 10px;
|
|
|
- font-size: 0.2rem;
|
|
|
- color: #2e8aecff;
|
|
|
- font-family: PingFang SC-Medium;
|
|
|
- &:hover {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
+
|
|
|
+ ::-webkit-scrollbar-thumb {
|
|
|
+ background: #2e8aec;
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::-webkit-scrollbar-thumb:hover {
|
|
|
+ background: #2e8aec;
|
|
|
}
|
|
|
- }
|
|
|
- .left-main {
|
|
|
- margin-top: calc(100vh * (8 / 1080));
|
|
|
- color: #7ea4c8ff;
|
|
|
- background: transparent;
|
|
|
- height: calc(100vh * (230 / 1080));
|
|
|
- // overflow: auto;
|
|
|
- font-size: 0.14rem;
|
|
|
- }
|
|
|
- //滚动条样式
|
|
|
- ::-webkit-scrollbar {
|
|
|
- width: 3.5px;
|
|
|
- }
|
|
|
- ::-webkit-scrollbar-track {
|
|
|
- background-color: rgba(0, 0, 0, 0);
|
|
|
- }
|
|
|
- ::-webkit-scrollbar-thumb {
|
|
|
- background: #2e8aec;
|
|
|
- border-radius: 3px;
|
|
|
- }
|
|
|
- ::-webkit-scrollbar-thumb:hover {
|
|
|
- background: #2e8aec;
|
|
|
}
|
|
|
}
|
|
|
- .right {
|
|
|
- width: calc(100vw * (920 / 1920));
|
|
|
- height: calc(100vh * (304 / 1080));
|
|
|
- background: url(../../assets/img/footer.png);
|
|
|
- background-size: calc(100vw * (920 / 1920)) calc(100vh * (304 / 1080));
|
|
|
- padding-left: 10px;
|
|
|
- .right-top {
|
|
|
- width: calc(100vw * (880 / 1920));
|
|
|
- height: calc(100vh * (40 / 1080));
|
|
|
- color: #ffffff;
|
|
|
- margin-top: 10px;
|
|
|
- background: url(../../assets/img/main_left_decorate.png);
|
|
|
- background-size: calc(100vw * (880 / 1920)) calc(100vh * (40 / 1080));
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- h3 {
|
|
|
- padding-left: 10px;
|
|
|
- font-size: 0.2rem;
|
|
|
- font-weight: bold;
|
|
|
- font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
|
|
|
- }
|
|
|
- p {
|
|
|
- padding-right: 10px;
|
|
|
- font-size: 0.2rem;
|
|
|
- color: #2e8aecff;
|
|
|
- font-family: PingFang SC-Medium;
|
|
|
- &:hover {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
+ //预览弹窗
|
|
|
+ .dhk {
|
|
|
+ width: calc(100vw * (1200 / 1920));
|
|
|
+ height: calc(100vh * (850 / 1080));
|
|
|
+ // background: salmon;
|
|
|
+ background: #0f1540ff;
|
|
|
+ position: absolute;
|
|
|
+ top: 10%;
|
|
|
+ left: 20%;
|
|
|
+ z-index: 99;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .gb {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
}
|
|
|
- .right-main {
|
|
|
- margin-top: calc(100vh * (8 / 1080));
|
|
|
- color: #7ea4c8ff;
|
|
|
- background: transparent;
|
|
|
- height: calc(100vh * (230 / 1080));
|
|
|
- // overflow: auto;
|
|
|
- font-size: 0.14rem;
|
|
|
+
|
|
|
+ video {
|
|
|
+ width: calc(100vw * (1440 / 1920));
|
|
|
+ height: calc(100vh * (810 / 1080));
|
|
|
}
|
|
|
- //滚动条样式
|
|
|
- ::-webkit-scrollbar {
|
|
|
- width: 3.5px;
|
|
|
+
|
|
|
+ .el-image {
|
|
|
+ width: calc(100vw * (960 / 1920));
|
|
|
+ height: calc(100vh * (720 / 1080));
|
|
|
}
|
|
|
- ::-webkit-scrollbar-track {
|
|
|
- background-color: rgba(0, 0, 0, 0);
|
|
|
+
|
|
|
+ .el-button-group {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 35%;
|
|
|
}
|
|
|
- ::-webkit-scrollbar-thumb {
|
|
|
- background: #2e8aec;
|
|
|
- border-radius: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ //机密验证界面
|
|
|
+ .jm {
|
|
|
+ width: calc(100vw * (530 / 1920));
|
|
|
+ height: calc(100vh * (370 / 1080));
|
|
|
+ // background: salmon;
|
|
|
+ background: url(../../assets/img/Group-585.png);
|
|
|
+ background-size: calc(100vw * (530 / 1920)) calc(100vh * (370 / 1080));
|
|
|
+ padding-top: calc(100vh * (50 / 1080));
|
|
|
+ padding-left: calc(100vw * (30 / 1920));
|
|
|
+ position: absolute;
|
|
|
+ top: 25%;
|
|
|
+ left: 35%;
|
|
|
+ z-index: 99;
|
|
|
+ display: flex;
|
|
|
+ // justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .gb1 {
|
|
|
+ position: absolute;
|
|
|
+ top: 10%;
|
|
|
+ right: 8%;
|
|
|
}
|
|
|
- ::-webkit-scrollbar-thumb:hover {
|
|
|
- background: #2e8aec;
|
|
|
+
|
|
|
+ .el-button-group {
|
|
|
+ position: absolute;
|
|
|
+ top: 10%;
|
|
|
+ right: 1%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- //预览弹窗
|
|
|
- .dhk {
|
|
|
- width: calc(100vw * (1200 / 1920));
|
|
|
- height: calc(100vh * (850 / 1080));
|
|
|
- // background: salmon;
|
|
|
- background: #0f1540ff;
|
|
|
- position: absolute;
|
|
|
- top: 10%;
|
|
|
- left: 20%;
|
|
|
- z-index: 99;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .gb {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- }
|
|
|
+ ::v-deep .el-icon-arrow-down:before {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
|
|
|
- video {
|
|
|
- width: calc(100vw * (1440 / 1920));
|
|
|
- height: calc(100vh * (810 / 1080));
|
|
|
- }
|
|
|
+ //table样式
|
|
|
+ ::v-deep .el-table th {
|
|
|
+ background: #016c9aa6;
|
|
|
+ color: #2e8aecff;
|
|
|
+ }
|
|
|
|
|
|
- .el-image {
|
|
|
- width: calc(100vw * (960 / 1920));
|
|
|
- height: calc(100vh * (720 / 1080));
|
|
|
- }
|
|
|
+ ::v-deep .el-table tr {
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
|
|
|
- .el-button-group {
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 35%;
|
|
|
- }
|
|
|
+ ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
|
|
|
+ background: transparent;
|
|
|
}
|
|
|
|
|
|
- //机密验证界面
|
|
|
- .jm {
|
|
|
- width: calc(100vw * (530 / 1920));
|
|
|
- height: calc(100vh * (370 / 1080));
|
|
|
- // background: salmon;
|
|
|
- background: url(../../assets/img/Group-585.png);
|
|
|
- background-size: calc(100vw * (530 / 1920)) calc(100vh * (370 / 1080));
|
|
|
- padding-top: calc(100vh * (50 / 1080));
|
|
|
- padding-left: calc(100vw * (30 / 1920));
|
|
|
- position: absolute;
|
|
|
- top: 25%;
|
|
|
- left: 35%;
|
|
|
- z-index: 99;
|
|
|
- display: flex;
|
|
|
- // justify-content: center;
|
|
|
- align-items: center;
|
|
|
- .gb1 {
|
|
|
- position: absolute;
|
|
|
- top: 10%;
|
|
|
- right: 8%;
|
|
|
- }
|
|
|
- .el-button-group {
|
|
|
- position: absolute;
|
|
|
- top: 10%;
|
|
|
- right: 1%;
|
|
|
- }
|
|
|
+ //table顶部白线消失处理
|
|
|
+ ::v-deep .el-table th.el-table__cell.is-leaf {
|
|
|
+ border-bottom: 1px solid #006c9aff;
|
|
|
+ padding: 0;
|
|
|
}
|
|
|
-}
|
|
|
-::v-deep .el-icon-arrow-down:before {
|
|
|
- display: none;
|
|
|
-}
|
|
|
-
|
|
|
-//table样式
|
|
|
-::v-deep .el-table th {
|
|
|
- background: #016c9aa6;
|
|
|
- color: #2e8aecff;
|
|
|
-}
|
|
|
-::v-deep .el-table tr {
|
|
|
- background: transparent;
|
|
|
-}
|
|
|
-::v-deep
|
|
|
- .el-table--striped
|
|
|
- .el-table__body
|
|
|
- tr.el-table__row--striped
|
|
|
- td.el-table__cell {
|
|
|
- background: transparent;
|
|
|
-}
|
|
|
-//table顶部白线消失处理
|
|
|
-::v-deep .el-table th.el-table__cell.is-leaf {
|
|
|
- border-bottom: 1px solid #006c9aff;
|
|
|
- padding: 0;
|
|
|
-}
|
|
|
-//table底下白线消失处理
|
|
|
-::v-deep .el-table {
|
|
|
- color: #ffffffff;
|
|
|
-}
|
|
|
-::v-deep .el-table::before {
|
|
|
- width: 0;
|
|
|
-}
|
|
|
-//tr下面边框
|
|
|
-::v-deep .el-table td.el-table__cell {
|
|
|
- border-bottom: 1px solid #083b61ff;
|
|
|
- padding: 8px 0;
|
|
|
-}
|
|
|
-::v-deep .el-table tbody tr:hover > td {
|
|
|
- background-color: #016c9a78 !important;
|
|
|
-}
|
|
|
-//预览弹出框样式
|
|
|
-::v-deep .el-form-item__label {
|
|
|
- color: #2e8aecff;
|
|
|
-}
|
|
|
-
|
|
|
-::v-deep .el-input__inner {
|
|
|
- background-color: transparent;
|
|
|
- border: 1px solid #01d1ffff;
|
|
|
- color: #ffffffcc;
|
|
|
-}
|
|
|
-//底部表格超出显示滚动条
|
|
|
-::v-deep .el-table--scrollable-x .el-table__body-wrapper {
|
|
|
- overflow: auto;
|
|
|
-}
|
|
|
-
|
|
|
-//通知内容详细
|
|
|
-::v-deep .el-dialog6 {
|
|
|
- width: calc(100vw * (800 / 1920)) !important;
|
|
|
- height: calc(100vh * (950 / 1080)) !important;
|
|
|
- background: url(../../assets/img/Group-585.png);
|
|
|
- background-size: calc(100vw * (800 / 1920)) calc(100vh * (950 / 1080));
|
|
|
- .el-dialog__title {
|
|
|
- color: #ffffff;
|
|
|
+
|
|
|
+ //table底下白线消失处理
|
|
|
+ ::v-deep .el-table {
|
|
|
+ color: #ffffffff;
|
|
|
}
|
|
|
- .main {
|
|
|
- margin-top: calc(100vh * (40 / 1080));
|
|
|
- width: calc(100vw * (640 / 1920));
|
|
|
- height: calc(100vh * (680 / 1080));
|
|
|
- // background: salmon;
|
|
|
- color: #7ea4c8ff;
|
|
|
+
|
|
|
+ ::v-deep .el-table::before {
|
|
|
+ width: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ //tr下面边框
|
|
|
+ ::v-deep .el-table td.el-table__cell {
|
|
|
+ border-bottom: 1px solid #083b61ff;
|
|
|
+ padding: 8px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .el-table tbody tr:hover>td {
|
|
|
+ background-color: #016c9a78 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ //预览弹出框样式
|
|
|
+ ::v-deep .el-form-item__label {
|
|
|
+ color: #2e8aecff;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .el-input__inner {
|
|
|
+ background-color: transparent;
|
|
|
+ border: 1px solid #01d1ffff;
|
|
|
+ color: #ffffffcc;
|
|
|
+ }
|
|
|
+
|
|
|
+ //底部表格超出显示滚动条
|
|
|
+ ::v-deep .el-table--scrollable-x .el-table__body-wrapper {
|
|
|
overflow: auto;
|
|
|
}
|
|
|
-}
|
|
|
+
|
|
|
+ //通知内容详细
|
|
|
+ ::v-deep .el-dialog6 {
|
|
|
+ width: calc(100vw * (800 / 1920)) !important;
|
|
|
+ height: calc(100vh * (950 / 1080)) !important;
|
|
|
+ background: url(../../assets/img/Group-585.png);
|
|
|
+ background-size: calc(100vw * (800 / 1920)) calc(100vh * (950 / 1080));
|
|
|
+
|
|
|
+ .el-dialog__title {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main {
|
|
|
+ margin-top: calc(100vh * (40 / 1080));
|
|
|
+ width: calc(100vw * (640 / 1920));
|
|
|
+ height: calc(100vh * (680 / 1080));
|
|
|
+ // background: salmon;
|
|
|
+ color: #7ea4c8ff;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
|
|
|
|
|
<style>
|
|
|
-/* 中间下拉菜单样式 */
|
|
|
-.el-dropdown-menu {
|
|
|
- background-color: #0f1540;
|
|
|
- border: 1px solid #0f1540ff;
|
|
|
-}
|
|
|
-.el-dropdown-menu__item {
|
|
|
- color: #006c9aff;
|
|
|
-}
|
|
|
-.el-dropdown-menu__item:hover {
|
|
|
- background: #01d1ff3b !important;
|
|
|
-}
|
|
|
+ /* 中间下拉菜单样式 */
|
|
|
+ .el-dropdown-menu {
|
|
|
+ background-color: #0f1540;
|
|
|
+ border: 1px solid #0f1540ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dropdown-menu__item {
|
|
|
+ color: #006c9aff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dropdown-menu__item:hover {
|
|
|
+ background: #01d1ff3b !important;
|
|
|
+ }
|
|
|
</style>
|
