<template>
<div>
<header-pulic :data="header"></header-pulic>
<div class="con-padding">
<div class="img-con">
<img :src="imgWeiXin" alt="" />
<div>
<p>维修员：胡海</p>
<p>188 6828 6823</p>
</div>
</div>
<p class="span-repair">
<span>维修员</span>
<span class="box-evaluate">
<span v-for="n in 5" @click="cur = n" :class="{'on':cur>=n}"></span>
</span>
</p>
<p class="span-repair is-satisfied">
<span>维修服务</span>
<span v-for="(item,index) in list" :class="{active : tabIndex == index}" @click="tabIndex = index">{{item.title}}</span>
</p>
<textarea></textarea>
<div class="submit-div">
<button class="submit">
提交
</button>
</div>
</div>
</div>
</template>
<script>
import '@/assets/js/layer041002.js';
import imgWeiXin from './img/[email protected]';
export default {
name: '',
components: {
},
data: () => ({
header:{
'title':'订单评价',
},
imgWeiXin,
list:[
{
'title':'满意'
},
{
'title':'不满意'
},
],
tabIndex:0,
cur : -1,//当前评价星星索引
}),
created() {
},
methods: {
},
computed: {
}
}
</script>
<style scoped>
.submit{
width: 6.1rem;
height: .76rem;
background-color: #3770A9 ;
font-size: .28rem;
color: #FFF;
text-align: center;
border-radius: .38rem;
}
.submit-div{
display: flex;
justify-content: center;
margin-top: .76rem;
}
.textarea-color{
background-color: #ccc;
}
.con-padding{
padding: .42rem .36rem;
}
.img-con{
display: flex;
height: .76rem;
align-items: center;
margin-bottom: .48rem;
}
.img-con img{
margin-right: .24rem;
width: .76rem;
height: .76rem;
border-radius: .38rem;
}
.span-repair{
display: flex;
height: .44rem;
align-items: center;
margin-bottom: .36rem;
}
.span-repair>span:nth-of-type(1){
width: 1.58rem;
color: #1C1C1C;
font-size: .32rem;
font-weight: 600;
}
textarea{
width: 100%;
height: 2rem;
background: #F8F9FB;
border-radius: .06rem;
box-sizing: border-box;
padding: .2rem;
}
.is-satisfied span:nth-of-type(2),.is-satisfied span:nth-of-type(3){
display: flex;
justify-content: center;
align-items: center;
width: 1.28rem;
height: .44rem;
color: #979797;
border-radius: .22rem;
box-sizing: border-box;
border: 1px solid #979797;
background: #fff;
font-size: .28rem;
margin-right: .52rem;
}
.is-satisfied span.active{
background: #3770A9;
color: #fff;
border: 1px solid #3770A9;
}
.box-evaluate .on{
background: url('img/[email protected]') no-repeat center center/.4rem .4rem;
}
.box-evaluate span{
float: left;
width: .4rem;
height: .4rem;
background: url('img/[email protected]') no-repeat center center/.4rem .4rem;
margin-right: .14rem;
}
.box-evaluate{
width: 3.5rem;
float: left;
}
</style>
