counterMaintain.vue

<template>
  <div class="container">
    <div class="img">
      <van-uploader class="upload" v-model="bannerList" :max-count="4">
        <div class="circle">
          <span class="add">+</span>
        </div>
      </van-uploader>
      <div class="tj">
        点击添加专柜主题图
      </div>
    </div>
    <div class="banner">
      <van-uploader class="upload" v-model="bannerList" :max-count="4">
      </van-uploader>
    </div>
    <van-cell-group class="gn">
      <van-cell title="专柜LOGO" center class="logo">
        <template slot="default">
            <van-uploader v-model="fileList" :max-count="1" class="input" >
              <div class="cube" style="width:54px;height:50px;">
                 <van-icon name="photo" size="40" /> 
                <div class="mb">点击替换</div> 
              </div>
          </van-uploader>        
        </template>
      </van-cell>
      <van-cell title="专柜名称">
        <template slot="default">
          <van-field v-model="name" placeholder="输入名称" class="input" />
        </template>
      </van-cell>
      <van-cell title="所在楼层">
        <template slot="default">
          <van-field v-model="floor" placeholder="输入楼层" class="input" />
        </template>
      </van-cell>
      <!-- <van-cell title="专柜介绍" is-link value="点击输入" /> -->
      <div class="detail">
      <div class="border">
        <div class="des">活动描述</div>
        <van-field
          v-model="message"
          rows="4"
          autosize
          type="textarea"
          placeholder="请输入描述"
          show-word-limit
        />
      </div>
    </div>
    </van-cell-group>
    <div class="creat">保存信息</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      floor: "",
      fileList: [],
      bannerList:[],
      message: ""
    };
  }
};
</script>
<style >

</style>
<style scoped>
.logo >>> .van-uploader__preview-delete{
  top: 0;
}
.des {
  font-size: 14px;
  font-weight: bold;
  color: rgba(45, 71, 106, 1);
  margin-bottom: 12px;
}
.detail {
  background-color: #fff;
  padding: 12px 16px 0 16px;
}

.border >>> .van-field__control {
  text-align: left !important;
  background-color: #f8f8f8;
}
.border >>> .van-cell {
  padding: 0;
}
.banner >>> .upload[data-v-6ea3d66a] {
  padding-top: 10px;
  z-index: 100;
  width: 100%;
  position: static;
  transform: unset;
  padding: 10px 9px 0;
}
.img >>> .van-uploader__preview {
  display: none;
}
.banner {
  width: 100%;
  background-color: #fff;
  height: 96px;
}
.banner >>> .van-uploader__upload-icon {
  display: none;
}
.creat {
  margin: 20px 0;
  width: 343px;
  height: 40px;
  line-height: 40px;
  background: rgba(117, 178, 253, 1);
  border-radius: 10px;
  font-size: 16px;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  bottom: 0;
}
.cube {
  width:54px;
  height: 50px;
  background: rgba(248, 248, 248, 1);
  border-radius: 8px;
  position: relative;
  text-align: center;
}
.tj {
  height: 32px;
  line-height: 32px;
  background: rgba(117, 178, 253, 0.8);
  text-align: center;
  font-size: 12px;
  color: #fff;
  position: absolute;
  bottom: 0;
  width: 100%;
}
.add {
  font-size: 60px;
  font-weight: 500;
  color: #fff;
}
.circle {
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  line-height: 60px;
  text-align: center;
}
.upload {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.van-cell__value,
.van-cell__value--alone {
  text-align: right;
}
.input {
  padding: 0;
}
.gn >>> .van-field__control {
  text-align: right;
}
.gn >>> .van-cell__title {
  font-size: 14px;
  font-weight: bold;
  color: rgba(45, 71, 106, 1);
}
.gn {
  margin-top: 12px;
  width: 100%;
  padding-bottom: 12px;
}
.input >>> .van-uploader__input-wrapper {
  width: 100%;
}
.container {
  min-height: 100%;
  height: auto;
  background: #F8F8F8;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
}
.img {
  width: 100%;
  height: 200px;
  position: relative;
  background:url(../../../public/img/cswiper.png)no-repeat;
  background-size: cover;
}
.mb {
  position: absolute;
  width: 100%;
  height: 16px;
  bottom: 0;
  line-height: 16px;
  background-color: #8EBFFB;
  font-size: 6px;
  color: #fff;
}
.mb img {
  height: 100%;
}
.cfx {
  position: absolute;
  
  width: 100%;
  height: 100%;

}

</style>