766 lines
27 KiB
Vue
766 lines
27 KiB
Vue
<template>
|
||
<div class="insertLabel">
|
||
<div class="container">
|
||
<div class="top">
|
||
<span>新增指标</span>
|
||
<img :src="imgUrl" alt @click="closeX" />
|
||
</div>
|
||
<!-- 行列转换 -->
|
||
<div class="rowCol">
|
||
<input type="radio" name="rowCols" value="hang" v-model="radioValue" />行
|
||
<input type="radio" name="rowCols" value="lie" v-model="radioValue" />列
|
||
</div>
|
||
<!-- 运算框 -->
|
||
<div class="computkuang">
|
||
<div class="left">
|
||
<input type="text" placeholder="请输入新增指标名称" v-model="insertName" />
|
||
<div class="label">
|
||
<div
|
||
v-for="(item,index) in labelData"
|
||
:key="index"
|
||
:class="{bgcolor:item.state}"
|
||
@click="labelSelInd(index)"
|
||
>{{item.text}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="center">
|
||
<div>=</div>
|
||
<div @click="bgclick(inds)">></div>
|
||
</div>
|
||
<div class="right">
|
||
<textarea v-model="fontComput"></textarea>
|
||
<div class="computer">
|
||
<div
|
||
v-for="(item,index) in computers"
|
||
:key="index"
|
||
@click="computSS(index)"
|
||
>{{item.text}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 提示 -->
|
||
<div class="explains">说明：指标只能从上表中显示</div>
|
||
<!-- 确认取消 -->
|
||
<div class="bnottom">
|
||
<div @click="trueVerify">确认</div>
|
||
<div @click="closeX">取消</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import verify from '../../assets/js/verifyMathematicalExpression'
|
||
export default {
|
||
name: 'insertLabel',
|
||
data () {
|
||
return {
|
||
imgUrl: require('../../../static/nav/deleteImg.png'),
|
||
radioValue: 'hang',
|
||
fontComput: '',
|
||
insertName: '',
|
||
labelData: [
|
||
{ text: '健康的说法更健康', state: false },
|
||
{ text: '健康的说jksdfhjjk', state: false },
|
||
{ text: '健聚划算df覅㐇', state: false },
|
||
{ text: '健聚dfgs划算覅㐇', state: false },
|
||
{ text: '健聚jdskfasdfhn 划算覅㐇', state: false },
|
||
{ text: '健聚sdg划asd算覅㐇', state: false },
|
||
{ text: '健聚dsfg划f算覅㐇', state: false },
|
||
{ text: '健聚划sdasdffasf算覅㐇', state: false },
|
||
{ text: '健聚划sdasdff算覅㐇', state: false },
|
||
{ text: '健聚划sdf算覅s㐇', state: false },
|
||
{ text: '健聚划sdafsdf算ssd覅㐇', state: false },
|
||
{ text: '健聚划sasdfdf算覅㐇', state: false },
|
||
{ text: '健聚划ssadfdf算覅㐇', state: false },
|
||
{ text: '健聚划sdf算覅㐇', state: false },
|
||
{ text: '健聚划ssdafgfdf算s覅㐇', state: false },
|
||
{ text: '健聚划sdaasfdf算s覅㐇', state: false },
|
||
{ text: '健聚划sdasfdfa算覅㐇', state: false }
|
||
],
|
||
computers: [
|
||
{ text: '*', state: false },
|
||
{ text: '-', state: false },
|
||
{ text: '7', state: false },
|
||
{ text: '8', state: false },
|
||
{ text: '9', state: false },
|
||
{ text: '/', state: false },
|
||
{ text: '+', state: false },
|
||
{ text: '4', state: false },
|
||
{ text: '5', state: false },
|
||
{ text: '6', state: false },
|
||
{ text: '(', state: false },
|
||
{ text: ')', state: false },
|
||
{ text: '1', state: false },
|
||
{ text: '2', state: false },
|
||
{ text: '3', state: false },
|
||
{ text: '.', state: false },
|
||
{ text: '0', state: false }
|
||
],
|
||
// 左侧选中的指标下标
|
||
inds: false
|
||
}
|
||
},
|
||
watch: {
|
||
radioValue (newValue, oldValue) {
|
||
console.log(newValue)
|
||
if (newValue === 'hang') {
|
||
// 行列新增渲染
|
||
if (this.$route.query.type === 'area') {
|
||
switch (this.$store.state.SelecttDimension.col) {
|
||
case 'dq':
|
||
this.labelData = this.$store.state.transBefore.areaName.map((item, index) => {
|
||
return {
|
||
text: item,
|
||
state: false
|
||
}
|
||
})
|
||
break
|
||
case 'sj':
|
||
this.labelData = this.$store.state.transBefore.timeArr.map((item, index) => {
|
||
return {
|
||
text: item,
|
||
state: false
|
||
}
|
||
})
|
||
break
|
||
case 'zb':
|
||
this.labelData = this.$store.state.transBefore.termsName.map((item, index) => {
|
||
return {
|
||
text: item,
|
||
state: false
|
||
}
|
||
})
|
||
break
|
||
}
|
||
} else {
|
||
this.labelData = this.$store.state.transBefore.termsName.map((item, index) => {
|
||
return {
|
||
text: item,
|
||
state: false
|
||
}
|
||
})
|
||
}
|
||
} else if (newValue === 'lie') {
|
||
// 行列新增渲染
|
||
if (this.$route.query.type === 'area') {
|
||
console.log(this.$store.state.SelecttDimension.row, this.$store.state.SelecttDimension.col)
|
||
switch (this.$store.state.SelecttDimension.row) {
|
||
case 'dq':
|
||
this.labelData = this.$store.state.transBefore.areaName.map((item, index) => {
|
||
return {
|
||
text: item,
|
||
state: false
|
||
}
|
||
})
|
||
break
|
||
case 'sj':
|
||
this.labelData = this.$store.state.transBefore.timeArr.map((item, index) => {
|
||
return {
|
||
text: item,
|
||
state: false
|
||
}
|
||
})
|
||
break
|
||
case 'zb':
|
||
this.labelData = this.$store.state.transBefore.termsName.map((item, index) => {
|
||
return {
|
||
text: item,
|
||
state: false
|
||
}
|
||
})
|
||
break
|
||
}
|
||
} else {
|
||
this.labelData = this.$store.state.transBefore.timeArr.map((item, index) => {
|
||
return {
|
||
text: item,
|
||
state: false
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
labelSelInd (ind) {
|
||
this.inds = ind
|
||
this.labelData.forEach((item, index) => {
|
||
/*eslint-disable*/
|
||
index === ind ? (item.state = true) : item.state = false
|
||
})
|
||
|
||
},
|
||
bgclick(ind) {
|
||
console.log(ind)
|
||
if (ind !== false) {
|
||
this.labelData.forEach((item, index) => {
|
||
/*eslint-disable*/
|
||
index === ind ? (this.fontComput += '#' + item.text + '#') : ''
|
||
})
|
||
} else {
|
||
// alert('请选择指标！')
|
||
this.$alert('请选择指标！', '温馨提示', {
|
||
confirmButtonText: '确定',
|
||
})
|
||
}
|
||
|
||
},
|
||
closeX() {
|
||
this.$store.state.insertWindowState = false
|
||
},
|
||
// 计算器
|
||
computSS(ind) {
|
||
// console.log(ind)
|
||
// console.log(this.fontComput,'this.fontComput')
|
||
this.computers.forEach((item, index) => {
|
||
index === ind ? (item.state = true, this.fontComput += item.text) : item.state = false
|
||
})
|
||
},
|
||
// 确定
|
||
trueVerify() {
|
||
let Str = JSON.parse(JSON.stringify(this.fontComput)).replace(/#.*?#/gi, '$').split('')
|
||
console.log(Str, '处理成表达式')
|
||
let bty = Str.map((item, index) => {
|
||
let sft = item
|
||
if (item === '$') {
|
||
if (index === 0) {
|
||
sft = (/^[0-9]+/.test(Str[index + 1]) || /^[$]+/.test(Str[index + 1])) ? '1*' : '1'
|
||
} else if (index === Str.length - 1) {
|
||
sft = (/^[0-9]+/.test(Str[index - 1]) || /^[$]+/.test(Str[index - 1])) ? '*1' : '1'
|
||
} else {
|
||
if ((/^[$]+/.test(Str[index + 1]))) {
|
||
sft = '1*'
|
||
} else if ((/^[$]+/.test(Str[index - 1]))) {
|
||
sft = '*1'
|
||
} else {
|
||
sft = '1'
|
||
}
|
||
|
||
}
|
||
} else {
|
||
sft = item
|
||
}
|
||
return sft
|
||
})
|
||
console.log(bty.join(''))
|
||
// 验证表达式是否正确
|
||
// verify(bty.join(''), {})
|
||
if (verify(bty.join(''), {})) {
|
||
let newArrat = this.fontComput.split('#').filter((item, index) => {
|
||
return item !== ''
|
||
})
|
||
console.log(newArrat)
|
||
// 定义一个新数组用来存放新增指标的数据
|
||
let newarr = []
|
||
if (this.radioValue === 'hang') {
|
||
if (this.$route.query.type !== 'area') {
|
||
// 循环指标名称 回调一个计算后的数组
|
||
|
||
let dataStrArr = this.$store.state.transBefore.termsName.map((item, index) => {//外层
|
||
// console.log(this.$store.state.transBefore.transBeforeTermsData[index])
|
||
// 定义拼接计算的字符串
|
||
let comStr = ''
|
||
newArrat.forEach((list, key) => {
|
||
if (this.$store.state.transBefore.termsName.indexOf(list) !== -1) {
|
||
comStr += this.$store.state.transBefore.transBeforeTermsData[index][this.$store.state.transBefore.termsName.indexOf(list)]
|
||
} else {
|
||
comStr += list
|
||
}
|
||
})
|
||
// console.log(comStr)
|
||
// console.log(eval(comStr))
|
||
return eval(comStr).toString()
|
||
})
|
||
// 将处理完的数据放到全局变量中
|
||
this.$store.state.transBefore.termsName.push(this.insertName)
|
||
this.$store.state.transBefore.termsExplain.push('')
|
||
this.$store.state.transBefore.transBeforeTermsData.push(dataStrArr)
|
||
this.closeX()
|
||
this.$emit('emitState', true)
|
||
} else {
|
||
let dataStrArr = null
|
||
switch (this.$store.state.SelecttDimension.col) {
|
||
case 'dq':
|
||
// 循环地区名称 回调一个计算后的数组
|
||
dataStrArr = this.$store.state.transBefore.areaName.map((item, index) => {//外层
|
||
// console.log(this.$store.state.transBefore.transBeforeAreaData[index])
|
||
// 定义拼接计算的字符串
|
||
let comStr = ''
|
||
newArrat.forEach((list, key) => {
|
||
if (this.$store.state.transBefore.areaName.indexOf(list) !== -1) {
|
||
comStr += this.$store.state.transBefore.transBeforeAreaData[index][this.$store.state.transBefore.areaName.indexOf(list)]
|
||
} else {
|
||
comStr += list
|
||
}
|
||
})
|
||
// console.log(comStr)
|
||
// console.log(eval(comStr))
|
||
return eval(comStr).toString()
|
||
})
|
||
// 将处理完的数据放到全局变量中
|
||
this.$store.state.transBefore.areaName.push(this.insertName)
|
||
break
|
||
case 'sj':
|
||
// 循环地区名称 回调一个计算后的数组
|
||
dataStrArr = this.$store.state.transBefore.timeArr.map((item, index) => {//外层
|
||
// console.log(this.$store.state.transBefore.transBeforeAreaData[index])
|
||
// 定义拼接计算的字符串
|
||
let comStr = ''
|
||
newArrat.forEach((list, key) => {
|
||
if (this.$store.state.transBefore.timeArr.indexOf(list) !== -1) {
|
||
comStr += this.$store.state.transBefore.transBeforeAreaData[index][this.$store.state.transBefore.timeArr.indexOf(list)]
|
||
} else {
|
||
comStr += list
|
||
}
|
||
})
|
||
// console.log(comStr)
|
||
// console.log(eval(comStr))
|
||
return eval(comStr).toString()
|
||
})
|
||
// 将处理完的数据放到全局变量中
|
||
this.$store.state.transBefore.timeArr.push(this.insertName)
|
||
break
|
||
case 'zb':
|
||
// 循环地区名称 回调一个计算后的数组
|
||
dataStrArr = this.$store.state.transBefore.termsName.map((item, index) => {//外层
|
||
// console.log(this.$store.state.transBefore.transBeforeAreaData[index])
|
||
// 定义拼接计算的字符串
|
||
let comStr = ''
|
||
newArrat.forEach((list, key) => {
|
||
if (this.$store.state.transBefore.termsName.indexOf(list) !== -1) {
|
||
comStr += this.$store.state.transBefore.transBeforeAreaData[index][this.$store.state.transBefore.termsName.indexOf(list)]
|
||
} else {
|
||
comStr += list
|
||
}
|
||
})
|
||
// console.log(comStr)
|
||
// console.log(eval(comStr))
|
||
return eval(comStr).toString()
|
||
})
|
||
// 将处理完的数据放到全局变量中
|
||
this.$store.state.transBefore.termsName.push(this.insertName)
|
||
this.$store.state.transBefore.termsExplain.push('')
|
||
break
|
||
}
|
||
// 将处理完的数据放到全局变量中
|
||
this.$store.state.transBefore.transBeforeAreaData.push(dataStrArr)
|
||
this.closeX()
|
||
this.$emit('emitState', true)
|
||
}
|
||
|
||
} else {
|
||
if (this.$route.query.type !== 'area') {
|
||
// console.log(this.$store.state.transBefore.transBeforeTermsData)
|
||
let bsfyu = this.$store.state.transBefore.transBeforeTermsData
|
||
// 将数据进行转置
|
||
let datarts = bsfyu[0].map(function (col, index) {
|
||
return bsfyu.map((row, key) => {
|
||
return row[index]
|
||
})
|
||
})
|
||
console.log(datarts)
|
||
// 循环年
|
||
let dataStrArr = this.$store.state.transBefore.timeArr.map((item, index) => {//外层
|
||
// console.log(this.$store.state.transBefore.transBeforeTermsData[index])
|
||
// 定义拼接计算的字符串
|
||
let comStr = ''
|
||
newArrat.forEach((list, key) => {
|
||
if (this.$store.state.transBefore.timeArr.indexOf(list) !== -1) {
|
||
comStr += datarts[index][this.$store.state.transBefore.timeArr.indexOf(list)]
|
||
} else {
|
||
comStr += list
|
||
}
|
||
})
|
||
// console.log(comStr)
|
||
// console.log(eval(comStr))
|
||
return eval(comStr).toString()
|
||
})
|
||
console.log(dataStrArr, '101025')
|
||
datarts.push(dataStrArr)
|
||
// 将数据转置回来
|
||
let newZz = datarts[0].map(function (col, index) {
|
||
return datarts.map((row, key) => {
|
||
return row[index]
|
||
})
|
||
})
|
||
// 将处理完的数据放到全局变量中
|
||
this.$store.state.transBefore.timeArr.push(this.insertName)
|
||
this.$store.state.transBefore.transBeforeTermsData = newZz
|
||
this.closeX()
|
||
this.$emit('emitState', true)
|
||
} else {
|
||
// console.log(this.$store.state.transBefore.transBeforeAreaData)
|
||
let bsfyu = this.$store.state.transBefore.transBeforeAreaData
|
||
// 将数据进行转置
|
||
let datarts = bsfyu[0].map(function (col, index) {
|
||
return bsfyu.map((row, key) => {
|
||
return row[index]
|
||
})
|
||
})
|
||
console.log(datarts)
|
||
let dataStrArr = null
|
||
let newZz = null
|
||
switch (this.$store.state.SelecttDimension.row) {
|
||
case 'dq':
|
||
// 循环年
|
||
dataStrArr = this.$store.state.transBefore.areaName.map((item, index) => {//外层
|
||
// console.log(this.$store.state.transBefore.transBeforeAreaData[index])
|
||
// 定义拼接计算的字符串
|
||
let comStr = ''
|
||
newArrat.forEach((list, key) => {
|
||
if (this.$store.state.transBefore.areaName.indexOf(list) !== -1) {
|
||
comStr += datarts[index][this.$store.state.transBefore.areaName.indexOf(list)]
|
||
} else {
|
||
comStr += list
|
||
}
|
||
})
|
||
// console.log(comStr)
|
||
// console.log(eval(comStr))
|
||
return eval(comStr).toString()
|
||
})
|
||
console.log(dataStrArr, '101025')
|
||
datarts.push(dataStrArr)
|
||
// 将数据转置回来
|
||
newZz = datarts[0].map(function (col, index) {
|
||
return datarts.map((row, key) => {
|
||
return row[index]
|
||
})
|
||
})
|
||
// 将处理完的数据放到全局变量中
|
||
this.$store.state.transBefore.areaName.push(this.insertName)
|
||
break
|
||
case 'sj':
|
||
// 循环年
|
||
dataStrArr = this.$store.state.transBefore.timeArr.map((item, index) => {//外层
|
||
// console.log(this.$store.state.transBefore.transBeforeAreaData[index])
|
||
// 定义拼接计算的字符串
|
||
let comStr = ''
|
||
newArrat.forEach((list, key) => {
|
||
if (this.$store.state.transBefore.timeArr.indexOf(list) !== -1) {
|
||
comStr += datarts[index][this.$store.state.transBefore.timeArr.indexOf(list)]
|
||
} else {
|
||
comStr += list
|
||
}
|
||
})
|
||
// console.log(comStr)
|
||
// console.log(eval(comStr))
|
||
return eval(comStr).toString()
|
||
})
|
||
console.log(dataStrArr, '101025')
|
||
datarts.push(dataStrArr)
|
||
// 将数据转置回来
|
||
newZz = datarts[0].map(function (col, index) {
|
||
return datarts.map((row, key) => {
|
||
return row[index]
|
||
})
|
||
})
|
||
// 将处理完的数据放到全局变量中
|
||
this.$store.state.transBefore.timeArr.push(this.insertName)
|
||
break
|
||
case 'zb':
|
||
// 循环年
|
||
dataStrArr = this.$store.state.transBefore.termsName.map((item, index) => {//外层
|
||
// console.log(this.$store.state.transBefore.transBeforeAreaData[index])
|
||
// 定义拼接计算的字符串
|
||
let comStr = ''
|
||
newArrat.forEach((list, key) => {
|
||
if (this.$store.state.transBefore.termsName.indexOf(list) !== -1) {
|
||
comStr += datarts[index][this.$store.state.transBefore.termsName.indexOf(list)]
|
||
} else {
|
||
comStr += list
|
||
}
|
||
})
|
||
// console.log(comStr)
|
||
// console.log(eval(comStr))
|
||
return eval(comStr).toString()
|
||
})
|
||
console.log(dataStrArr, '101025')
|
||
datarts.push(dataStrArr)
|
||
// 将数据转置回来
|
||
newZz = datarts[0].map(function (col, index) {
|
||
return datarts.map((row, key) => {
|
||
return row[index]
|
||
})
|
||
})
|
||
// 将处理完的数据放到全局变量中
|
||
this.$store.state.transBefore.termsName.push(this.insertName)
|
||
this.$store.state.transBefore.termsExplain.push('')
|
||
break
|
||
}
|
||
// 将处理完的数据放到全局变量中
|
||
// this.$store.state.transBefore.timeArr.push(this.insertName)
|
||
this.$store.state.transBefore.transBeforeAreaData = newZz
|
||
this.closeX()
|
||
this.$emit('emitState', true)
|
||
}
|
||
|
||
|
||
}
|
||
} else {
|
||
// alert('您输入的表达式正确，请重新输入！')
|
||
this.$alert('您输入的表达式正确，请重新输入！', '温馨提示', {
|
||
confirmButtonText: '确定',
|
||
})
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
// 行列新增渲染
|
||
if (this.$route.query.type === 'area') {
|
||
if (this.$store.state.SelecttDimension.row === 'sj' && this.$store.state.SelecttDimension.col === 'dq') {
|
||
this.labelData = this.$store.state.transBefore.areaName.map((item, index) => {
|
||
return {
|
||
text: item,
|
||
state: false
|
||
}
|
||
})
|
||
} else if (this.$store.state.SelecttDimension.row === 'dq' && this.$store.state.SelecttDimension.col === 'sj') {
|
||
this.labelData = this.$store.state.transBefore.timeArr.map((item, index) => {
|
||
return {
|
||
text: item,
|
||
state: false
|
||
}
|
||
})
|
||
} else if (this.$store.state.SelecttDimension.row === 'sj' && this.$store.state.SelecttDimension.col === 'zb') {
|
||
this.labelData = this.$store.state.transBefore.termsName.map((item, index) => {
|
||
return {
|
||
text: item,
|
||
state: false
|
||
}
|
||
})
|
||
} else if (this.$store.state.SelecttDimension.row === 'zb' && this.$store.state.SelecttDimension.col === 'sj') {
|
||
this.labelData = this.$store.state.transBefore.timeArr.map((item, index) => {
|
||
return {
|
||
text: item,
|
||
state: false
|
||
}
|
||
})
|
||
} else if (this.$store.state.SelecttDimension.row === 'zb' && this.$store.state.SelecttDimension.col === 'dq') {
|
||
this.labelData = this.$store.state.transBefore.areaName.map((item, index) => {
|
||
return {
|
||
text: item,
|
||
state: false
|
||
}
|
||
})
|
||
} else if (this.$store.state.SelecttDimension.row === 'dq' && this.$store.state.SelecttDimension.col === 'zb') {
|
||
this.labelData = this.$store.state.transBefore.termsName.map((item, index) => {
|
||
return {
|
||
text: item,
|
||
state: false
|
||
}
|
||
})
|
||
}
|
||
} else {
|
||
this.labelData = this.$store.state.transBefore.termsName.map((item, index) => {
|
||
return {
|
||
text: item,
|
||
state: false
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.insertLabel {
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-color: rgba(0, 0, 0, 0.2);
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 10;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
& > .container {
|
||
width: 51.25rem;
|
||
height: 51.25rem;
|
||
background-color: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
& > .top {
|
||
margin-top: 1.875rem;
|
||
width: 46.25rem;
|
||
height: 3.875rem;
|
||
border-bottom: 0.125rem solid #bdbdbd;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
& > span {
|
||
font-size: 1.375rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0rem;
|
||
color: #333333;
|
||
}
|
||
& > img {
|
||
width: 1.3125rem;
|
||
height: 1.3125rem;
|
||
}
|
||
& > img:hover {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
& > .rowCol {
|
||
margin: 1.25rem 0;
|
||
width: 46.25rem;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
& > input {
|
||
margin: 0 0.4rem;
|
||
}
|
||
}
|
||
& > .computkuang {
|
||
width: 46.25rem;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
& > .left {
|
||
width: 16rem;
|
||
& > input {
|
||
width: 16rem;
|
||
font-size: 0.8rem;
|
||
letter-spacing: 0.0625rem;
|
||
}
|
||
& > .label {
|
||
margin: 0.75rem 0;
|
||
width: 16.16rem;
|
||
height: 30rem;
|
||
border: 0.0625rem solid #bdbbdb;
|
||
overflow: auto;
|
||
& > div {
|
||
width: 100%;
|
||
height: 2.125rem;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
font-size: 0.8rem;
|
||
letter-spacing: 0.0625rem;
|
||
}
|
||
& > div:hover {
|
||
cursor: pointer;
|
||
}
|
||
& > .bgcolor {
|
||
background-color: #25aff3;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
& > .center {
|
||
margin: 0 1rem;
|
||
width: 5rem;
|
||
height: 30rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
& > div {
|
||
width: 2rem;
|
||
height: 2rem;
|
||
font-size: 1.5rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
& > div:nth-child(2) {
|
||
background-color: #25aff3;
|
||
color: #fff;
|
||
}
|
||
& > div:nth-child(2):hover {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
& > .right {
|
||
width: 25rem;
|
||
height: 32.875rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
& > textarea {
|
||
width: 24rem;
|
||
height: 16rem;
|
||
}
|
||
& > .computer {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
flex-wrap: wrap;
|
||
border: 1px solid #bdbdbd;
|
||
& > div {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 0.75rem 0.82rem;
|
||
width: 3rem;
|
||
height: 1.8rem;
|
||
border: 0.0625rem solid #bdbdbd;
|
||
background: url("../../../static/data/bt_counter.jpg") repeat-x;
|
||
}
|
||
& > div:hover {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
& > .explains {
|
||
width: 46.25rem;
|
||
font-size: 1rem;
|
||
}
|
||
& > .bnottom {
|
||
width: 46.25rem;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
& > div:nth-child(1) {
|
||
width: 15.625rem;
|
||
height: 3.1875rem;
|
||
background-color: #52b6e3;
|
||
border-radius: 0.3125rem;
|
||
font-size: 1.25rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0rem;
|
||
color: #ffffff;
|
||
}
|
||
& > div:nth-child(2) {
|
||
width: 15.625rem;
|
||
height: 3.1875rem;
|
||
border-radius: 0.3125rem;
|
||
border: solid 0.125rem #dbdbdb;
|
||
border-radius: 0.3125rem;
|
||
font-size: 1.25rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0rem;
|
||
}
|
||
& > div {
|
||
margin: 1rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
& > div:hover {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|