|
@@ -1,98 +1,119 @@
|
|
<template>
|
|
<template>
|
|
<div class="board-container">
|
|
<div class="board-container">
|
|
- <div :style="listLoading?mask:''">
|
|
|
|
- <div class="header">
|
|
|
|
- <img src="../assets/logo.png" style="margin-left: 10px; margin-top: 10px;">
|
|
|
|
- </div>
|
|
|
|
- <div class="title_info">
|
|
|
|
- <el-card shadow="always" style="background-color: rgb(201,235,251); border-radius: 5px;">
|
|
|
|
- <p class="item_name">{{ itemName }}</p>
|
|
|
|
- <p class="scope_cycleName">{{ type }} {{ scope }} 类 {{ cycleName }} 专家评分公示</p>
|
|
|
|
- </el-card>
|
|
|
|
- </div>
|
|
|
|
- <div class="analysis_collect">
|
|
|
|
- <span class="name"><i class="el-icon-s-data"></i>评分项平均得分</span>
|
|
|
|
- <!-- <el-row :gutter="20">
|
|
|
|
- <el-col :span="6" v-for="(item, index ) in analysisData">
|
|
|
|
- <el-card shadow="never">
|
|
|
|
- <span style="font-weight: 900; letter-spacing: 3px;">
|
|
|
|
- {{ item.questionName }}
|
|
|
|
- </span>
|
|
|
|
- <span style="float: right; color: red;">
|
|
|
|
- {{ item.avgScore }}
|
|
|
|
- </span>
|
|
|
|
|
|
+ <div :style="listLoading ? mask : ''">
|
|
|
|
+ <div class="fixed_area">
|
|
|
|
+ <div class="header">
|
|
|
|
+ <img src="../assets/logo.png" style="margin-left: -12%;">
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="user_size">
|
|
|
|
+ <span v-for="(u, index) in userSize">
|
|
|
|
+ <i class="el-icon-s-custom" style="color: green; font-size: xx-large;"></i>
|
|
|
|
+ </span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="data_area">
|
|
|
|
+ <div class="title_info">
|
|
|
|
+ <el-card shadow="always" style="background-color: rgb(201,235,251); border-radius: 5px;">
|
|
|
|
+ <p class="item_name">{{ itemName }}</p>
|
|
|
|
+ <p class="scope_cycleName">{{ type }} 类 专家评分公示 <span style="font-size: x-large;"> 第 {{ cycleName }} 轮</span></p>
|
|
|
|
+ <div style="font-size: large; margin-top: 5px;">
|
|
|
|
+ <span>专家人数n= {{ professorNum }}, 𝒳²(1-{{ probability }})={{ standardValue }}</span>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
</el-card>
|
|
</el-card>
|
|
- </el-col>
|
|
|
|
- </el-row> -->
|
|
|
|
- <el-table :data="analysisData" :span-method="objectSpanMethod"
|
|
|
|
- style="width: 100% ;letter-spacing: 2px; color: black; " border="border">
|
|
|
|
- <el-table-column v-for="item in tableColumn" :key="item.prop" :prop="item.prop" :label="item.label"
|
|
|
|
- align="center" min-width="180" />
|
|
|
|
- </el-table>
|
|
|
|
- <!-- <y-page-list-layout>
|
|
|
|
- <el-table :data="analysisData" slot="table" style="width: 100%;" border="border">
|
|
|
|
- <el-table-column v-if="analysisData != null && analysisData.length > 0" label="名称" align="center" width="150px">
|
|
|
|
- <template slot-scope="{row}">
|
|
|
|
- <span style=" letter-spacing: 3px;">{{ row.questionName }}-{{ row.avgScore }}</span>
|
|
|
|
- </template>
|
|
|
|
- </el-table-column>
|
|
|
|
- <el-table-column v-if="analysisData != null && analysisData.length > 0" label="定级因素" align="center">
|
|
|
|
- <template slot-scope="{row}">
|
|
|
|
- <div style="margin-bottom: 10px; letter-spacing: 3px;" v-for="(item, index) in row.children">{{ item.questionName }}-{{ item.avgScore }}</div>
|
|
|
|
- </template>
|
|
|
|
- </el-table-column>
|
|
|
|
- <el-table-column v-if="analysisData != null && analysisData.length > 0" label="一级因子" align="center">
|
|
|
|
- <template slot-scope="{row}">
|
|
|
|
- <div v-for="(item, index) in row.children">
|
|
|
|
- <div style=" margin-bottom: 10px; letter-spacing: 3px;" v-for="(item1, index) in item.children">
|
|
|
|
- {{ item1.questionName }}-{{ item1.avgScore }}
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </template>
|
|
|
|
- </el-table-column>
|
|
|
|
- <el-table-column v-if="analysisData != null && analysisData.length > 0" label="二级因子" align="center">
|
|
|
|
- <template slot-scope="{row}">
|
|
|
|
- <div v-for="(item, index) in row.children">
|
|
|
|
- <div v-for="(item1, index) in item.children">
|
|
|
|
- <div style=" margin-bottom: 10px; letter-spacing: 3px;" v-for="(item2, index) in item1.children">
|
|
|
|
- {{ item2.questionName }}-{{ item2.avgScore }}
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </template>
|
|
|
|
- </el-table-column>
|
|
|
|
- </el-table>
|
|
|
|
- </y-page-list-layout> -->
|
|
|
|
-
|
|
|
|
- </div>
|
|
|
|
- <!-- <div class="origin_collect">
|
|
|
|
- <span class="name"><i class="el-icon-s-data"></i>专家评分值</span>
|
|
|
|
- <el-table :data="originData" border style="width: 100%" stripe highlight-current-row>
|
|
|
|
- <el-table-column prop="professorNo" label="专家编号" align="center">
|
|
|
|
- </el-table-column>
|
|
|
|
- <el-table-column prop="questionName" label="评分项" align="center">
|
|
|
|
- </el-table-column>
|
|
|
|
- <el-table-column prop="score" label="专家评分值" align="center">
|
|
|
|
- </el-table-column>
|
|
|
|
- <el-table-column prop="created" label="专家评分时间" align="center">
|
|
|
|
- </el-table-column>
|
|
|
|
- </el-table>
|
|
|
|
- </div> -->
|
|
|
|
- <div class="user_size">
|
|
|
|
- <span v-for="(u, index) in userSize">
|
|
|
|
- <i class="el-icon-s-custom" style="color: green; font-size: xx-large;"></i>
|
|
|
|
- </span>
|
|
|
|
- </div>
|
|
|
|
|
|
+ </div>
|
|
|
|
+ <div class="analysis_collect">
|
|
|
|
+ <span class="name"><i class="el-icon-s-data"></i>评分项统计分析</span>
|
|
|
|
+ <el-table :data="analysisData" :span-method="objectSpanMethod"
|
|
|
|
+ style="width: 100% ; color: black; " border="border">
|
|
|
|
+ <el-table-column v-for="item in tableColumn" :key="item.prop" :prop="item.prop" :label="item.label"
|
|
|
|
+ align="left" min-width="180">
|
|
|
|
+ <template slot-scope="{row}">
|
|
|
|
+ <slot :info="{ label: item.prop, data: row }">
|
|
|
|
+ <span style=" font-size: large; font-weight: bolder;">
|
|
|
|
+ <span
|
|
|
|
+ :style="parseFloat(row[item.prop].validate === null ? '0' : row[item.prop].validate) > standardValue ? 'color:red' : ''">
|
|
|
|
+ {{ row[item.prop].label }}
|
|
|
|
+ </span>
|
|
|
|
+ </span>
|
|
|
|
+ <el-tag type="warning" style="margin-left: 5px; font-size: large;"
|
|
|
|
+ v-if="row[item.prop].avgScore != null">
|
|
|
|
+ {{ row[item.prop].avgScore }}
|
|
|
|
+ </el-tag>
|
|
|
|
+ <el-tag style="margin-left: 5px; font-size: large;"
|
|
|
|
+ v-if="row[item.prop].variance != null">
|
|
|
|
+ {{ row[item.prop].variance }}
|
|
|
|
+ </el-tag>
|
|
|
|
+ <el-tag v-if="row[item.prop].validate != null" type="success"
|
|
|
|
+ style="margin-left: 5px; font-size: large;">
|
|
|
|
+ {{ row[item.prop].validate }}
|
|
|
|
+ </el-tag>
|
|
|
|
+ </slot>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ </el-table>
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+ <div class="origin_collect" v-if="analysisData!=null">
|
|
|
|
+ <span class="name"><i class="el-icon-s-data"></i>专家评分值</span>
|
|
|
|
+ <el-table :data="originData" border slot="table" style="width: 100%" stripe highlight-current-row>
|
|
|
|
+ <el-table-column v-for="item in originTableColumn" :key="item.prop" :prop="item.prop"
|
|
|
|
+ :label="item.label" align="center" min-width="180" :fixed="item.label === '专家编号'">
|
|
|
|
+ <template slot-scope="{row}">
|
|
|
|
+ <slot :info="{ label: item.prop, data: row }" v-if="item.prop === 'professorNo'">
|
|
|
|
+ <span>
|
|
|
|
+ {{ row.professorNo }}
|
|
|
|
+ </span>
|
|
|
|
+ </slot>
|
|
|
|
+ <slot :info="{ label: item.prop, data: row }" v-else>
|
|
|
|
+ <span :style="notPass(item.prop)">
|
|
|
|
+ {{ row.scoreMap[item.prop] }}
|
|
|
|
+ </span>
|
|
|
|
+ </slot>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ </el-table>
|
|
|
|
+ <el-button type="success" style="margin-left: 48%; margin-top: 20px;"
|
|
|
|
+ @click="overCycle">结束本轮</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <div class="qr_code">
|
|
|
|
+ <div class="tuli_area">
|
|
|
|
+ <div class="tuli_name">
|
|
|
|
+ <div class="tuli" style="background-color: rgb(230, 162, 60);"></div> <span
|
|
|
|
+ class="t_name">平均分</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="tuli_name" style="margin-top: 40px;">
|
|
|
|
+ <div class="tuli" style="background-color: rgb(64, 158, 255);"></div> <span class="t_name">方差</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="tuli_name" style="margin-top: 80px;">
|
|
|
|
+ <div class="tuli" style="background-color: rgb(103, 194, 58);"></div> <span
|
|
|
|
+ class="t_name">检验值</span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <img src="../assets/QR_code.jpg" class="mini_qr" @click="dialogVisible = true">
|
|
|
|
+ </div>
|
|
|
|
+ <div class="history">
|
|
|
|
+ <div style="margin-top: 5px;" v-for="item in (cycleName - 1) " :key="index">
|
|
|
|
+ <el-button round @click="goHistory(item)">第 {{ item }} 轮数据</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
<div id="page" v-if="listLoading">
|
|
<div id="page" v-if="listLoading">
|
|
- <div id="container">
|
|
|
|
- <div id="ring"></div>
|
|
|
|
- <div id="ring"></div>
|
|
|
|
- <div id="ring"></div>
|
|
|
|
- <div id="ring"></div>
|
|
|
|
- <div id="h3">LOADING</div>
|
|
|
|
|
|
+ <div id="container">
|
|
|
|
+ <div id="ring"></div>
|
|
|
|
+ <div id="ring"></div>
|
|
|
|
+ <div id="ring"></div>
|
|
|
|
+ <div id="ring"></div>
|
|
|
|
+ <div id="h3">LOADING</div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
-</div>
|
|
|
|
|
|
+ <el-dialog :visible.sync="dialogVisible" width="30%">
|
|
|
|
+ <img src="../assets/QR_code.jpg">
|
|
|
|
+ </el-dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -113,7 +134,6 @@ export default {
|
|
originData: [],
|
|
originData: [],
|
|
listLoading: false,
|
|
listLoading: false,
|
|
itemName: "",
|
|
itemName: "",
|
|
- scope: "",
|
|
|
|
cycleName: "",
|
|
cycleName: "",
|
|
type: null,
|
|
type: null,
|
|
messages: [],
|
|
messages: [],
|
|
@@ -131,7 +151,14 @@ export default {
|
|
{ prop: 'element1', label: '一级因子' },
|
|
{ prop: 'element1', label: '一级因子' },
|
|
{ prop: 'element2', label: '二级因子' },
|
|
{ prop: 'element2', label: '二级因子' },
|
|
],
|
|
],
|
|
- mask:'opacity: 0.3;'
|
|
|
|
|
|
+ originTableColumn: [],
|
|
|
|
+ mask: 'opacity: 0.3;',
|
|
|
|
+ dialogVisible: false,
|
|
|
|
+ professorNum: null,
|
|
|
|
+ probability: null,
|
|
|
|
+ standardValue: null,
|
|
|
|
+ notPassColumnName: [],
|
|
|
|
+ documentId:null
|
|
}
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
@@ -150,7 +177,7 @@ export default {
|
|
if (data != undefined) {
|
|
if (data != undefined) {
|
|
if (data.data != null) {
|
|
if (data.data != null) {
|
|
this.getAnalysisList();
|
|
this.getAnalysisList();
|
|
- //this.getOriginList();
|
|
|
|
|
|
+ this.getOriginList();
|
|
}
|
|
}
|
|
if (data.userSize != undefined) {
|
|
if (data.userSize != undefined) {
|
|
this.userSize = (data.userSize) - 1;
|
|
this.userSize = (data.userSize) - 1;
|
|
@@ -165,9 +192,37 @@ export default {
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
this.getAnalysisList();
|
|
this.getAnalysisList();
|
|
- // this.getOriginList();
|
|
|
|
|
|
+ this.getOriginList();
|
|
|
|
+
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ goHistory(cycleNum) {
|
|
|
|
+ let routeUrl = this.$router.resolve({
|
|
|
|
+ path: "/history",
|
|
|
|
+ query: {"documentId":this.documentId,"cycleNum":cycleNum}
|
|
|
|
+ });
|
|
|
|
+ window.open(routeUrl.href, '_blank');
|
|
|
|
+ },
|
|
|
|
+ notPass(columnName) {
|
|
|
|
+ if (this.notPassColumnName.indexOf(columnName) != -1) {
|
|
|
|
+ return "color:red;";
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ overCycle() {
|
|
|
|
+ this.$api.dashboard.overCycle().then(res => {
|
|
|
|
+ if (res.code == 200) {
|
|
|
|
+ this.$notify({
|
|
|
|
+ title: '成功',
|
|
|
|
+ message: '',
|
|
|
|
+ type: 'success'
|
|
|
|
+ });
|
|
|
|
+ this.getAnalysisList();
|
|
|
|
+ this.getOriginList();
|
|
|
|
+ this.notPassColumnName = [];
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
|
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
|
return this.spanArr[rowIndex][columnIndex]
|
|
return this.spanArr[rowIndex][columnIndex]
|
|
},
|
|
},
|
|
@@ -177,42 +232,58 @@ export default {
|
|
console.log("您的浏览器不支持socket")
|
|
console.log("您的浏览器不支持socket")
|
|
} else {
|
|
} else {
|
|
// 创建 WebSocketClient 实例并连接到服务端 API 接口
|
|
// 创建 WebSocketClient 实例并连接到服务端 API 接口
|
|
- this.client = new WebSocketClient('wss://kps.scdayou.com/ws/apo/ws')
|
|
|
|
|
|
+ this.client = new WebSocketClient('wss://kps.scdayou.com/ws/apo/ws')
|
|
//this.client = new WebSocketClient('ws://127.0.0.1:8090/apo/ws')
|
|
//this.client = new WebSocketClient('ws://127.0.0.1:8090/apo/ws')
|
|
this.client.connect()
|
|
this.client.connect()
|
|
}
|
|
}
|
|
},
|
|
},
|
|
getAnalysisList() {
|
|
getAnalysisList() {
|
|
-
|
|
|
|
const that = this
|
|
const that = this
|
|
that.listLoading = true;
|
|
that.listLoading = true;
|
|
|
|
+
|
|
this.$api.dashboard.getMergeData()
|
|
this.$api.dashboard.getMergeData()
|
|
.then((res) => {
|
|
.then((res) => {
|
|
that.analysisData = res.data.analysisData;
|
|
that.analysisData = res.data.analysisData;
|
|
that.itemName = res.data.itemName;
|
|
that.itemName = res.data.itemName;
|
|
- that.cycleName = res.data.cycleName;
|
|
|
|
|
|
+ that.cycleName = res.data.cycleNum;
|
|
that.type = res.data.typeName;
|
|
that.type = res.data.typeName;
|
|
- setTimeout(()=>{
|
|
|
|
|
|
+ that.professorNum = res.data.professorNum;
|
|
|
|
+ that.probability = res.data.probability;
|
|
|
|
+ that.standardValue = res.data.standardValue;
|
|
|
|
+ that.documentId = res.data.documentId;
|
|
|
|
+ for (let i in that.analysisData) {
|
|
|
|
+ for (let a in that.analysisData[i]) {
|
|
|
|
+ let validate = that.analysisData[i][a].validate
|
|
|
|
+ if (validate != null && validate > that.standardValue) {
|
|
|
|
+ that.notPassColumnName.push(that.analysisData[i][a].label)
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ setTimeout(() => {
|
|
that.listLoading = false
|
|
that.listLoading = false
|
|
- },2000)
|
|
|
|
-
|
|
|
|
|
|
+ }, 1000)
|
|
|
|
+
|
|
})
|
|
})
|
|
.catch(() => {
|
|
.catch(() => {
|
|
that.listLoading = false
|
|
that.listLoading = false
|
|
})
|
|
})
|
|
|
|
+
|
|
},
|
|
},
|
|
getOriginList() {
|
|
getOriginList() {
|
|
const that = this
|
|
const that = this
|
|
this.$api.dashboard.getOriginList()
|
|
this.$api.dashboard.getOriginList()
|
|
.then((res) => {
|
|
.then((res) => {
|
|
- if (res.data[0].score == null) {
|
|
|
|
- that.originData = null;
|
|
|
|
- } else {
|
|
|
|
- that.originData = res.data;
|
|
|
|
-
|
|
|
|
|
|
+ that.originData = res.data;
|
|
|
|
+ if (that.originData.length > 0) {
|
|
|
|
+ let column = [];
|
|
|
|
+ let coloumObj = that.originData[1].scoreMap;
|
|
|
|
+ column.push({ prop: "professorNo", label: "专家编号" })
|
|
|
|
+ for (let propName in coloumObj) {
|
|
|
|
+ column.push({ prop: propName, label: propName })
|
|
|
|
+ }
|
|
|
|
+ that.originTableColumn = column;
|
|
}
|
|
}
|
|
- setTimeout(() => {
|
|
|
|
- }, 200)
|
|
|
|
})
|
|
})
|
|
.catch(() => {
|
|
.catch(() => {
|
|
that.listLoading = false
|
|
that.listLoading = false
|
|
@@ -233,7 +304,7 @@ export default {
|
|
</script>
|
|
</script>
|
|
<style lang="css" scoped>
|
|
<style lang="css" scoped>
|
|
.header {
|
|
.header {
|
|
- height: 80px;
|
|
|
|
|
|
+ height: 100px;
|
|
padding: 0;
|
|
padding: 0;
|
|
background-color: #ffffff;
|
|
background-color: #ffffff;
|
|
vertical-align: middle;
|
|
vertical-align: middle;
|
|
@@ -241,9 +312,19 @@ export default {
|
|
position: relative;
|
|
position: relative;
|
|
width: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
-.mask{
|
|
|
|
|
|
+
|
|
|
|
+.mask {
|
|
opacity: 0.3;
|
|
opacity: 0.3;
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+.fixed_area {
|
|
|
|
+ position: fixed;
|
|
|
|
+ top: 0;
|
|
|
|
+ z-index: 1;
|
|
|
|
+ width: 80%;
|
|
|
|
+ margin-left: 10%;
|
|
|
|
+}
|
|
|
|
+
|
|
.left {
|
|
.left {
|
|
margin: 0;
|
|
margin: 0;
|
|
padding-left: 10px;
|
|
padding-left: 10px;
|
|
@@ -259,6 +340,11 @@ export default {
|
|
top: -10;
|
|
top: -10;
|
|
background-image: linear-gradient(to top, #ace0f9 0%, #ffffff 100%);
|
|
background-image: linear-gradient(to top, #ace0f9 0%, #ffffff 100%);
|
|
overflow: auto;
|
|
overflow: auto;
|
|
|
|
+ height: 1200px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.data_area {
|
|
|
|
+ margin-top: 120px;
|
|
}
|
|
}
|
|
|
|
|
|
.item_name {
|
|
.item_name {
|
|
@@ -276,28 +362,26 @@ export default {
|
|
}
|
|
}
|
|
|
|
|
|
.title_info {
|
|
.title_info {
|
|
- margin-top: 1%;
|
|
|
|
- width: 70%;
|
|
|
|
- margin-left: 15%;
|
|
|
|
|
|
+ margin-top: 0;
|
|
text-align: center;
|
|
text-align: center;
|
|
|
|
+ width: 80%;
|
|
|
|
+ margin-left: 10%;
|
|
}
|
|
}
|
|
|
|
|
|
.analysis_collect {
|
|
.analysis_collect {
|
|
margin-top: 1%;
|
|
margin-top: 1%;
|
|
- width: 70%;
|
|
|
|
- margin-left: 15%;
|
|
|
|
- height: 1200px;
|
|
|
|
|
|
+ width: 80%;
|
|
|
|
+ margin-left: 10%;
|
|
}
|
|
}
|
|
|
|
|
|
.origin_collect {
|
|
.origin_collect {
|
|
- margin-top: 2%;
|
|
|
|
- width: 70%;
|
|
|
|
|
|
+ margin-top: 1%;
|
|
|
|
+ width: 80%;
|
|
margin-bottom: 2%;
|
|
margin-bottom: 2%;
|
|
- margin-left: 15%;
|
|
|
|
|
|
+ margin-left: 10%;
|
|
}
|
|
}
|
|
|
|
|
|
.name {
|
|
.name {
|
|
- /* font-family: 'Courier New', Courier, monospace; */
|
|
|
|
margin-bottom: 5px;
|
|
margin-bottom: 5px;
|
|
letter-spacing: 1px;
|
|
letter-spacing: 1px;
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
@@ -306,97 +390,145 @@ export default {
|
|
|
|
|
|
.user_size {
|
|
.user_size {
|
|
position: absolute;
|
|
position: absolute;
|
|
- right: 30px;
|
|
|
|
|
|
+ right: -10%;
|
|
top: 1%;
|
|
top: 1%;
|
|
height: 40px;
|
|
height: 40px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+.qr_code {
|
|
|
|
+ width: 9.5%;
|
|
|
|
+ height: 25%;
|
|
|
|
+ position: fixed;
|
|
|
|
+ bottom: 11%;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.history {
|
|
|
|
+ width: 8%;
|
|
|
|
+ position: fixed;
|
|
|
|
+ bottom: 10%;
|
|
|
|
+ right: 1%;
|
|
|
|
+}
|
|
|
|
+
|
|
#page {
|
|
#page {
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 50%;
|
|
top: 50%;
|
|
left: 50%;
|
|
left: 50%;
|
|
- display: flex;
|
|
|
|
- justify-content: center;
|
|
|
|
- align-items: center;
|
|
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
}
|
|
}
|
|
|
|
|
|
#container {
|
|
#container {
|
|
- display: flex;
|
|
|
|
- justify-content: center;
|
|
|
|
- align-items: center;
|
|
|
|
- position: relative;
|
|
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ position: relative;
|
|
}
|
|
}
|
|
|
|
|
|
#h3 {
|
|
#h3 {
|
|
- color: black;
|
|
|
|
- font-weight: bold;
|
|
|
|
|
|
+ color: black;
|
|
|
|
+ font-weight: bold;
|
|
}
|
|
}
|
|
|
|
|
|
#ring {
|
|
#ring {
|
|
- width: 190px;
|
|
|
|
- height: 190px;
|
|
|
|
- border: 1px solid transparent;
|
|
|
|
- border-radius: 50%;
|
|
|
|
- position: absolute;
|
|
|
|
|
|
+ width: 190px;
|
|
|
|
+ height: 190px;
|
|
|
|
+ border: 1px solid transparent;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ position: absolute;
|
|
}
|
|
}
|
|
|
|
|
|
#ring:nth-child(1) {
|
|
#ring:nth-child(1) {
|
|
- border-bottom: 8px solid rgb(255, 141, 249);
|
|
|
|
- animation: rotate1 2s linear infinite;
|
|
|
|
|
|
+ border-bottom: 8px solid rgb(255, 141, 249);
|
|
|
|
+ animation: rotate1 2s linear infinite;
|
|
}
|
|
}
|
|
|
|
|
|
@keyframes rotate1 {
|
|
@keyframes rotate1 {
|
|
- from {
|
|
|
|
- transform: rotateX(50deg) rotateZ(110deg);
|
|
|
|
- }
|
|
|
|
|
|
+ from {
|
|
|
|
+ transform: rotateX(50deg) rotateZ(110deg);
|
|
|
|
+ }
|
|
|
|
|
|
- to {
|
|
|
|
- transform: rotateX(50deg) rotateZ(470deg);
|
|
|
|
- }
|
|
|
|
|
|
+ to {
|
|
|
|
+ transform: rotateX(50deg) rotateZ(470deg);
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
#ring:nth-child(2) {
|
|
#ring:nth-child(2) {
|
|
- border-bottom: 8px solid rgb(255,65,106);
|
|
|
|
- animation: rotate2 2s linear infinite;
|
|
|
|
|
|
+ border-bottom: 8px solid rgb(255, 65, 106);
|
|
|
|
+ animation: rotate2 2s linear infinite;
|
|
}
|
|
}
|
|
|
|
|
|
@keyframes rotate2 {
|
|
@keyframes rotate2 {
|
|
- from {
|
|
|
|
- transform: rotateX(20deg) rotateY(50deg) rotateZ(20deg);
|
|
|
|
- }
|
|
|
|
|
|
+ from {
|
|
|
|
+ transform: rotateX(20deg) rotateY(50deg) rotateZ(20deg);
|
|
|
|
+ }
|
|
|
|
|
|
- to {
|
|
|
|
- transform: rotateX(20deg) rotateY(50deg) rotateZ(380deg);
|
|
|
|
- }
|
|
|
|
|
|
+ to {
|
|
|
|
+ transform: rotateX(20deg) rotateY(50deg) rotateZ(380deg);
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
#ring:nth-child(3) {
|
|
#ring:nth-child(3) {
|
|
- border-bottom: 8px solid rgb(0,255,255);
|
|
|
|
- animation: rotate3 2s linear infinite;
|
|
|
|
|
|
+ border-bottom: 8px solid rgb(0, 255, 255);
|
|
|
|
+ animation: rotate3 2s linear infinite;
|
|
}
|
|
}
|
|
|
|
|
|
@keyframes rotate3 {
|
|
@keyframes rotate3 {
|
|
- from {
|
|
|
|
- transform: rotateX(40deg) rotateY(130deg) rotateZ(450deg);
|
|
|
|
- }
|
|
|
|
|
|
+ from {
|
|
|
|
+ transform: rotateX(40deg) rotateY(130deg) rotateZ(450deg);
|
|
|
|
+ }
|
|
|
|
|
|
- to {
|
|
|
|
- transform: rotateX(40deg) rotateY(130deg) rotateZ(90deg);
|
|
|
|
- }
|
|
|
|
|
|
+ to {
|
|
|
|
+ transform: rotateX(40deg) rotateY(130deg) rotateZ(90deg);
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
#ring:nth-child(4) {
|
|
#ring:nth-child(4) {
|
|
- border-bottom: 8px solid rgb(252, 183, 55);
|
|
|
|
- animation: rotate4 2s linear infinite;
|
|
|
|
|
|
+ border-bottom: 8px solid rgb(252, 183, 55);
|
|
|
|
+ animation: rotate4 2s linear infinite;
|
|
}
|
|
}
|
|
|
|
|
|
@keyframes rotate4 {
|
|
@keyframes rotate4 {
|
|
- from {
|
|
|
|
- transform: rotateX(70deg) rotateZ(270deg);
|
|
|
|
- }
|
|
|
|
|
|
+ from {
|
|
|
|
+ transform: rotateX(70deg) rotateZ(270deg);
|
|
|
|
+ }
|
|
|
|
|
|
- to {
|
|
|
|
- transform: rotateX(70deg) rotateZ(630deg);
|
|
|
|
- }
|
|
|
|
|
|
+ to {
|
|
|
|
+ transform: rotateX(70deg) rotateZ(630deg);
|
|
|
|
+ }
|
|
}
|
|
}
|
|
-</style>
|
|
|
|
|
|
+
|
|
|
|
+.tuli_area {
|
|
|
|
+ margin-left: 20px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.tuli_name {
|
|
|
|
+ position: absolute;
|
|
|
|
+ display: flex;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.tuli {
|
|
|
|
+ height: 30px;
|
|
|
|
+ width: 70px;
|
|
|
|
+ background-color: antiquewhite;
|
|
|
|
+ border-radius: 8px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.t_name {
|
|
|
|
+ margin-left: 20px;
|
|
|
|
+ margin-top: 5px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.mini_qr {
|
|
|
|
+ margin-top: 73%;
|
|
|
|
+
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.mini_qr:hover {
|
|
|
|
+ cursor: pointer;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+button:focus {
|
|
|
|
+ outline: none;
|
|
|
|
+}</style>
|