fanzhen 1121
This commit is contained in:
fanzhen123
309
src/components/insertLabel/InsertLabel.vue
Normal file
309
src/components/insertLabel/InsertLabel.vue
Normal file
@@ -0,0 +1,309 @@
|
||||
<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="bgclick(index)"
|
||||
>{{item.text}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center">
|
||||
<div>=</div>
|
||||
<div>></div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<textarea v-model="fontComput"></textarea>
|
||||
<div class="computer">
|
||||
<div v-for="(item,index) in computers" :key="index">{{item.text}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 提示 -->
|
||||
<div class="explains">说明：指标只能从上表中显示</div>
|
||||
<!-- 确认取消 -->
|
||||
<div class="bnottom">
|
||||
<div>确认</div>
|
||||
<div @click="closeX">取消</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
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 }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
bgclick (ind) {
|
||||
this.labelData.forEach((item, index) => {
|
||||
index === ind ? item.state = true : item.state = false
|
||||
})
|
||||
},
|
||||
closeX () {
|
||||
this.$store.state.insertWindowState = 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>
|
||||
Reference in New Issue
Block a user