Browse Source

追加评价页面布局调整

master
dy-hu 1 year ago
parent
commit
3728caa5fe
  1. 58
      pages_category_page1/goodsModule/addEvaluate.vue

58
pages_category_page1/goodsModule/addEvaluate.vue

@ -8,7 +8,7 @@
<view class="addEvaluateTitle-box flex-row-plus mar-top-20 mar-left-20"> <view class="addEvaluateTitle-box flex-row-plus mar-top-20 mar-left-20">
<image class="title-img" :src="productImage"></image> <image class="title-img" :src="productImage"></image>
<view class="title-textbox overflow"> <view class="title-textbox overflow">
<label class="fs28 title-text">{{orderProductVO.productName}}</label>
<label class="fs28 font-color-252744 title-text">{{orderProductVO.productName}}</label>
<view v-if="orderProductVO.value" class="fs24 mar-top-10 sukValue"> <view v-if="orderProductVO.value" class="fs24 mar-top-10 sukValue">
{{orderProductVO.value}} {{orderProductVO.value}}
</view> </view>
@ -17,9 +17,9 @@
</view> </view>
</view> </view>
</view> </view>
<view class="fs26 mar-top-40 mar-left-20 addEvaluateText">追加评价</view>
<view class="fs26 mar-top-40 mar-left-20 addEvaluateText">{{ $t('page.additionalevaluation')}}</view>
<view class="textarea-box mar-top-20 mar-left-20"> <view class="textarea-box mar-top-20 mar-left-20">
<textarea class="textarea-text" v-model="commentText" maxlength="200" placeholder-style="color:#BBBBBB" placeholder="亲,有什么需要追加的吗"/>
<textarea class="textarea-text" v-model="commentText" maxlength="200" placeholder-style="color:#90919C" placeholder="亲,有什么需要追加的吗"/>
</view> </view>
<view class="mar-left-10 mar-top-10 evaluateImg"> <view class="mar-left-10 mar-top-10 evaluateImg">
<u-upload :action="action" ref="uUpload" :limitType="['png', 'jpg', 'jpeg', 'webp', 'gif', 'image']" :header="headerToken" :form-data="formData"></u-upload> <u-upload :action="action" ref="uUpload" :limitType="['png', 'jpg', 'jpeg', 'webp', 'gif', 'image']" :header="headerToken" :form-data="formData"></u-upload>
@ -27,7 +27,7 @@
</view> </view>
</view> </view>
<view class="butBox flex-items-plus mar-left-30"> <view class="butBox flex-items-plus mar-left-30">
<view class="submitbut" @click="submitTap">追加评论</view>
<view class="submitbut" @click="submitTap">{{ $t('common.submit') }}</view>
</view> </view>
</view> </view>
</template> </template>
@ -134,7 +134,7 @@
<style lang="scss"> <style lang="scss">
page{ page{
background-color: #F7F7F7;
background-color: #FAFAFA;;
} }
.container{ .container{
.addEvaluate-box{ .addEvaluate-box{
@ -142,23 +142,25 @@
.addEvaluate{ .addEvaluate{
width: 690upx; width: 690upx;
background-color: #FFFFFF; background-color: #FFFFFF;
border-radius: 10upx;
box-shadow: 0rpx 20rpx 40rpx 0rpx #F2F2F2;
border-radius: 30rpx;
padding-bottom: 30upx; padding-bottom: 30upx;
.addEvaluateText { .addEvaluateText {
color: #252744;
font-size: 28rpx;
font-weight: bold; font-weight: bold;
} }
.addEvaluateTitle-box{ .addEvaluateTitle-box{
.title-img{ .title-img{
width: 90upx;
height: 90upx;
border-radius: 4upx;
width: 90rpx;
height: 90rpx;
border-radius: 20rpx;
} }
.title-textbox{ .title-textbox{
width: 530upx; width: 530upx;
margin-left: 20upx; margin-left: 20upx;
font-weight: bold;
.sukValue { .sukValue {
color: #CCCCCC;
color: #90919C;
font-weight: 400; font-weight: 400;
} }
} }
@ -169,10 +171,10 @@
.textarea-text{ .textarea-text{
width: 610upx; width: 610upx;
height: 200upx; height: 200upx;
background-color: #FFFFFF;
font-size: 26upx;
padding: 20upx 20upx;
border: 2rpx solid #E4E5E6;
background-color: #FAFAFA;
font-size: 28rpx;
padding: 20rpx 20rpx;
border-radius: 20rpx;
} }
} }
.addPicture-box{ .addPicture-box{
@ -190,30 +192,30 @@
} }
.butBox{ .butBox{
position: absolute; position: absolute;
bottom: 40upx;
bottom: 40rpx;
.submitbut{ .submitbut{
height: 100upx;
width: 690upx;
background: #333333;
color: #FFEBC4;
font-size: 28upx;
height: 98rpx;
width: 690rpx;
background: #252744;
color: #FFFFFF;
font-size: 32rpx;
text-align: center; text-align: center;
line-height: 100upx;
line-height: 98rpx;
border-radius: 50rpx;
} }
} }
} }
</style> </style>
<style scoped> <style scoped>
.evaluateImg /deep/ .u-upload .u-list-item { .evaluateImg /deep/ .u-upload .u-list-item {
background: none;
border: 2rpx solid #E4E5E6;
border-radius: 0;
background: #FAFAFA;
border-radius: 20rpx;
} }
.evaluateImg /deep/ .u-upload .u-list-item .uicon-plus:before { .evaluateImg /deep/ .u-upload .u-list-item .uicon-plus:before {
content: ''; content: '';
height: 71rpx;
width: 71rpx;
background: url("https://ceres.zkthink.com/static/images/addImg.png") no-repeat center center;
height: 52rpx;
width: 52rpx;
background: url("https://wechat.hnthee.com/ceres-local-file/image/pic_add.png") no-repeat center center;
display: block; display: block;
background-size: contain; background-size: contain;
} }

Loading…
Cancel
Save