counterMaintain.vue

<template>
  <div class="container">
    <div class="img">
      <van-uploader class="upload">
        <div class="circle">
          <span class="add">+</span>
        </div>
      </van-uploader>
      <div class="tj">
        点击添加专柜主题图
      </div>
      <img src="../../../public/img/cswiper.png" />
    </div>
    <van-cell-group class="gn">
      <van-cell title="专柜LOGO">
        <template slot="default">
          <van-uploader v-model="fileList" :max-count="1" class="input">
            <div class="cube">
               <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="点击输入" />
    </van-cell-group>
    <div class="creat">保存信息</div>
  </div>
</template>

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

</style>
<style scoped>

.creat {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  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: 48px;
  height: 48px;
  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;
}
.container {
  height: 100%;
  background: #F8F8F8;
}
.img {
  width: 100%;
  height: 200px;
  background-color: pink;
  position: relative;
}
.img img {
  width: 100%;
}
.mb {
  position: absolute;
  width: 48px;
  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>