storevisit-ui-mobile/src/views/week/doubleWeekly.vue

<template>
  <div>
    <!--        顶部条-->
    <div class="navBarTOP">
      <van-nav-bar class="navBar" title="填写半月报" left-arrow @click-left="onClickLeft">
        <template #right>
          <span
            v-if="temporaryShow != 'N'"
            @click="tsContentsFn"
            style="
              color: white;
              background: #74a4d9;
              display: block;
              padding: 6px 10px;
              border-radius: 6px;
            "
            >暂存</span
          >
        </template>
      </van-nav-bar>
    </div>
    <!--        主体内容-->
    <div class="container linepAdd">
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <van-collapse v-model="activeNames">
        <van-collapse-item title="建店布机" name="2">
          <createStoreBJ :reportTargetAll="reportTargetAll"></createStoreBJ>
        </van-collapse-item>
        <van-collapse-item name="16" title="专业时时丽分销店下单">
          <ZYPlaceOrder :reportTargetAll="reportTargetAll"></ZYPlaceOrder>
        </van-collapse-item>
        <van-collapse-item title="业绩目标SAP(千元)" name="1" v-if="type != 3 && type != 4">
          <performanceSAP :reportTargetAll="reportTargetAll" :JZQuota="JZQuota"></performanceSAP>
        </van-collapse-item>
        <van-collapse-item name="27" title="内墙中高端SAP(千元)">
          <van-row>
            <van-col span="12"><span class="leftTitle">本月业绩</span></van-col>
            <van-col span="12"><span class="rightTitle">本季业绩</span></van-col>
            <van-col span="12"
              ><p>
                实际:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.rjqSapMonthAct)
                }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                实际:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.rjqSapQuarterAct)
                }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                达成率:<span class="colorbalck">{{ reportTargetAll.rjqSapMonthSuccessRate }}%</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                达成率:<span class="colorbalck"
                  >{{ reportTargetAll.rjqSapQuarterSuccessRate }}%</span
                >
              </p></van-col
            >
            <van-col span="12"
              ><p>
                成长率:<span class="colorbalck">{{ reportTargetAll.rjqSapMonthGrowRate }}%</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                成长率:<span class="colorbalck">{{ reportTargetAll.rjqSapQuarterGrowRate }}%</span>
              </p></van-col
            >
          </van-row>
        </van-collapse-item>
        <!-- 内外墙平涂SAP -->
        <van-collapse-item name="2" title="内外墙平涂SAP(千元)">
          <neiwaiqiangpingtu :reportTargetAll="reportTargetAll"></neiwaiqiangpingtu>
        </van-collapse-item>
        <van-collapse-item name="11" title="专业时时丽SAP(千元)">
          <ZYSAP :reportTargetAll="reportTargetAll"></ZYSAP>
        </van-collapse-item>
        <van-collapse-item name="28" title="防水+背胶SAP(千元)">
          <van-row>
            <van-col span="12"><span class="leftTitle">本月业绩</span></van-col
            ><van-col span="12"><span class="rightTitle">本季业绩</span></van-col>
            <van-col span="12"
              ><p>
                实际:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.fsbjSapMonthAct)
                }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                实际:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.fsbjSapQuarterAct)
                }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                达成率:<span class="colorbalck"
                  >{{ reportTargetAll.fsbjSapMonthSuccessRate }}%</span
                >
              </p></van-col
            >
            <van-col span="12"
              ><p>
                达成率:<span class="colorbalck"
                  >{{ reportTargetAll.fsbjSapQuarterSuccessRate }}%</span
                >
              </p></van-col
            >
            <van-col span="12"
              ><p>
                成长率:<span class="colorbalck">{{ reportTargetAll.fsbjSapMonthGrowRate }}%</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                成长率:<span class="colorbalck">{{ reportTargetAll.fsbjSapQuarterGrowRate }}%</span>
              </p></van-col
            >
          </van-row>
        </van-collapse-item>
        <van-collapse-item name="29" title="瓷砖胶SAP(千元)">
          <van-row>
            <van-col span="12"><span class="leftTitle">本月业绩</span></van-col
            ><van-col span="12"><span class="rightTitle">本季业绩</span></van-col>
            <van-col span="12"
              ><p>
                实际:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.czjSapMonthAct)
                }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                实际:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.czjSapQuarterAct)
                }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                达成率:<span class="colorbalck">{{ reportTargetAll.czjSapMonthSuccessRate }}%</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                达成率:<span class="colorbalck"
                  >{{ reportTargetAll.czjSapQuarterSuccessRate }}%</span
                >
              </p></van-col
            >
            <van-col span="12"
              ><p>
                成长率:<span class="colorbalck">{{ reportTargetAll.czjSapMonthGrowRate }}%</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                成长率:<span class="colorbalck">{{ reportTargetAll.czjSapQuarterGrowRate }}%</span>
              </p></van-col
            >
          </van-row>
        </van-collapse-item>
        <van-collapse-item title="魔术漆SAP(千元)" name="3">
          <van-row>
            <van-col span="12"><span class="leftTitle">本月业绩</span></van-col>
            <van-col span="12"><span class="rightTitle">本季业绩</span></van-col>
            <van-col span="12"
              ><p>
                实际:<span class="colorbalck">{{ Micrometer(reportTargetAll.ysqMonthAct) }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                实际:<span class="colorbalck">{{ Micrometer(reportTargetAll.ysqQuarterAct) }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                达成率:<span class="colorbalck">{{ reportTargetAll.ysqMonthSuccessRate }}%</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                达成率:<span class="colorbalck">{{ reportTargetAll.ysqQuarterSuccessRate }}%</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                成长率:<span class="colorbalck">{{ reportTargetAll.ysqMonthGrowRate }}%</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                成长率:<span class="colorbalck">{{ reportTargetAll.ysqQuarterGrowRate }}%</span>
              </p></van-col
            >
          </van-row>
        </van-collapse-item>
        <van-collapse-item title="质感外墙SAP(千元)" name="4">
          <zhiganwaiqiangSAP :reportTargetAll="reportTargetAll"></zhiganwaiqiangSAP>
        </van-collapse-item>
        <van-collapse-item name="17" title="超好贴分销店下单">
          <veryGoodPlaceOrder :reportTargetAll="reportTargetAll"></veryGoodPlaceOrder>
        </van-collapse-item>
        <van-collapse-item title="上期工作成果" name="7" class="collapsettitle">
          <template #title>
            <div>上期工作成果 <span class="colorRed">(必填)</span></div>
          </template>
          <div style="margin-top: -10px">
            <div class="weekContent" v-for="(item2, index2) in reportContentsList2" :key="index2">
              <!--              <p class="texttitle"><span class="opint"></span><span>{{ item2.title }}</span><span-->
              <!--                  class="colorRed">(必填)</span></p>-->
              <p class="texttitle texttitle2">计划工作进度</p>
              <p class="contentContainerp1">
                <van-field
                  v-model="reportContentsList3[index2].doubleWeekContent"
                  rows="4"
                  autosize
                  readonly
                  :formatter="formatter"
                  type="textarea" />
              </p>
              <!--              <p style="min-height: 32px;">{{ reportContentsList3[index2].doubleWeekContent }}</p>-->
              <p class="texttitle texttitle2">实际工作进度</p>
              <p class="contentContainerp">
                <van-field
                  v-model="item2.doubleWeekContent"
                  rows="4"
                  autosize
                  maxlength="800"
                  :formatter="formatter"
                  type="textarea"
                  show-word-limit />
              </p>
            </div>
          </div>
        </van-collapse-item>
        <van-collapse-item title="本期工作规划" name="8" class="collapsettitle">
          <template #title>
            <div>本期工作规划 <span class="colorRed">(必填)</span></div>
          </template>
          <div style="margin-top: -10px">
            <div class="weekContent" v-for="(item, index) in reportContentsList1" :key="index">
              <!--              <p class="texttitle"><span class="opint"></span><span>{{ item.title }}</span><span-->
              <!--                  class="colorRed">(必填)</span></p>-->
              <p class="contentContainerp">
                <van-field
                  v-model="item.doubleWeekContent"
                  rows="4"
                  autosize
                  maxlength="800"
                  type="textarea"
                  show-word-limit
                  :formatter="formatter" />
              </p>
            </div>
          </div>
        </van-collapse-item>
      </van-collapse>
      <br />
      <br />
      <!--      <div class="contentborder">-->
      <van-button type="info" size="small" plain class="Btn100" @click="submint"
        >提交半月报</van-button
      >
      <!--      </div>-->
    </div>
    <br />
    <br />
  </div>
</template>

<script>
import {
  getDetailById,
  double_week_type,
  updateReport,
  getReportInfo,
  tsContents,
} from '@/api/index';
import createStoreBJ from '@/views/componentsTarget/createStoreBJ';
import ZYPlaceOrder from '@/views/componentsTarget/ZYPlaceOrder';
import performanceSAP from '@/views/componentsTarget/performanceSAP';
import ZYSAP from '@/views/componentsTarget/ZYSAP';
import veryGoodPlaceOrder from '@/views/componentsTarget/veryGoodPlaceOrder';
import neiwaiqiangpingtu from '@/views/componentsTarget/neiwaiqiangpingtu';
import zhiganwaiqiangSAP from '@/views/componentsTarget/zhiganwaiqiangSAP';

export default {
  name: 'home',
  components: {
    createStoreBJ,
    ZYPlaceOrder,
    performanceSAP,
    ZYSAP,
    veryGoodPlaceOrder,
    neiwaiqiangpingtu,
    zhiganwaiqiangSAP,
  },
  data() {
    return {
      activeNames: [
        '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '11',
        '12',
        '16',
        '17',
        '27',
        '28',
        '29',
      ],
      powerGrade: '',
      value: '2',
      isclick: true,
      reportTargetAll: {},
      reportTarget: {},
      reportContentsList1: [],
      reportContentsList2: [],
      reportContentsList3: [],
      weekType: [],
      temporaryShow: '',
      type: '-1',
    };
  },
  created() {
    this.powerGrade = localStorage.getItem('powerGrade');
    this.temporaryShow = this.$route.query.temporaryShow;
    double_week_type().then((res) => {
      this.weekType = res.data;
    });
    if (this.$route.query.reportId != undefined) {
      this.getDetailById();
    } else {
      this.getReportInfo();
    }
  },
  watch: {
    $route(to, from) {
      this.powerGrade = localStorage.getItem('powerGrade');
      this.getReportInfo();
      this.temporaryShow = this.$route.query.temporaryShow;
      if (to.path == '/doubleWeekly') {
        if (this.$route.query.reportId != undefined) {
          this.getDetailById();
        } else {
          this.getReportInfo();
        }
      }
      // &&from.path=="/home"
      // if(to.path=="/doubleWeekly"&&from.path=="/myHistoricalDaily"){
      //   if(this.$route.query.reportId!=undefined){
      //     this.getDetailById()
      //   }else{
      //     this.getReportInfo()
      //   }
      // }
    },
  },
  methods: {
    formatter(value) {
      return value.replace(
        /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi,
        ''
      );
    },
    getDetailById() {
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      getDetailById({ reportId: this.$route.query.reportId }).then((res) => {
        loading1.clear();
        if (res.code == 200) {
          if (res.data.status != '0' && res.data.status != '2') {
            this.$dialog
              .alert({
                title: '系统提示',
                message: '半月报已提交或过期',
              })
              .then(() => {
                window.location.replace(window.location.origin + '/mobile/home');
              });
          } else {
            this.reportTargetAll = res.data.reportTargetAll;
            this.reportTarget = res.data;
            this.type = res.data.userType;
            this.reportContents = res.data.reportContents;
            var reportContentsList1 = [];
            var reportContentsList2 = [];
            var reportContentsList3 = [];
            var reportContentsdata = res.data.reportContents;
            for (var i = 0; i < res.data.reportContents.length; i++) {
              reportContentsdata[i].title = this.selectDictLabel(
                this.weekType,
                res.data.reportContents[i].doubleWeekType
              );
              if (res.data.reportContents[i].type == '2') {
                reportContentsList1.push(reportContentsdata[i]);
              }
              if (res.data.reportContents[i].type == '3') {
                reportContentsList2.push(reportContentsdata[i]);
              }
              if (res.data.reportContents[i].type == '1') {
                reportContentsList3.push(reportContentsdata[i]);
              }
            }
            // var ln1 = reportContentsList1.length
            // var ln2 = reportContentsList3.length
            // if (reportContentsList1.length > reportContentsList3.length) {
            //   var len = ln1 - ln2
            //   for (var x = 0; x < len; x++) {
            //     reportContentsList3.push({
            //       // contentTime: "",
            //       // weekContentAm: "",
            //       doubleWeekContent: "",
            //     })
            //   }
            // }
            if (reportContentsdata.length == 0) {
              // for (var i = 0; i < 6; i++) {
              //   var doubleWeekType = ""
              //   var title = ""
              //   if (i == "0") {
              //     doubleWeekType = "cpm"
              //     title = "产品"
              //
              //   }
              //   if (i == "1") {
              //     doubleWeekType = "qdm"
              //     title = "渠道"
              //   }
              //   if (i == "2") {
              //     doubleWeekType = "yym"
              //     title = "运营"
              //   }
              //   if (i == "3") {
              //     doubleWeekType = "jpm"
              //     title = "竞品"
              //   }
              //   if (i == "4") {
              //     doubleWeekType = "cwm"
              //     title = "财务"
              //   }
              //   if (i == "5") {
              //     doubleWeekType = "rlm"
              //     title = "人力"
              //   }
              reportContentsList1.push({
                title: '',
                doubleWeekContent: '',
                doubleWeekType: '',
                contentTime: this.parseTime(new Date(), '{y}-{m}-{d}'),
                type: 2,
              });
              reportContentsList3.push({
                title: '',
                doubleWeekContent: '',
                doubleWeekType: '',
                contentTime: this.parseTime(new Date(), '{y}-{m}-{d}'),
                type: 1,
              });
              reportContentsList2.push({
                title: '',
                doubleWeekContent: '',
                doubleWeekType: '',
                contentTime: this.parseTime(new Date(), '{y}-{m}-{d}'),
                type: 3,
              });
            } else {
              if (reportContentsList1.length < 1) {
                reportContentsList1.push({
                  title: '',
                  doubleWeekContent: '',
                  doubleWeekType: '',
                  contentTime: this.parseTime(new Date(), '{y}-{m}-{d}'),
                  type: 2,
                });
              }
              if (reportContentsList3.length < 1) {
                reportContentsList3.push({
                  title: '',
                  doubleWeekContent: '',
                  doubleWeekType: '',
                  contentTime: this.parseTime(new Date(), '{y}-{m}-{d}'),
                  type: 1,
                });
              }
              if (reportContentsList2.length < 1) {
                reportContentsList2.push({
                  title: '',
                  doubleWeekContent: '',
                  doubleWeekType: '',
                  contentTime: this.parseTime(new Date(), '{y}-{m}-{d}'),
                  type: 3,
                });
              }
            }
            // }
            this.reportContentsList1 = reportContentsList2; //  1 2   2  3  3  1
            this.reportContentsList2 = reportContentsList1;
            this.reportContentsList3 = reportContentsList3;
          }
        } else {
          this.$toast(res.msg);
        }
      });
    },
    tsContentsFn() {
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '数据提交中...',
        forbidClick: true,
      });
      if (this.isclick) {
        this.reportTarget.reportContents = [];
        this.reportTarget.reportContents = this.reportContentsList2
          .concat(this.reportContentsList1)
          .concat(this.reportContentsList3);
        this.reportTarget.status = '1';
        this.isclick = false;
        tsContents(this.reportTarget).then((res) => {
          loading1.clear();
          this.isclick = true;
          if (res.code == 200) {
            this.$dialog
              .alert({
                title: '系统提示',
                message: '暂存成功',
              })
              .then(() => {
                // if(this.$route.query.reportId!=undefined){
                //   window.location.replace(window.location.origin+"/mobile/myHistoricalDaily")
                // }else{
                //   window.location.replace(window.location.origin+"/mobile/home")
                // }
              });
          } else {
            this.$toast.fail(res.msg);
          }
        });
      }
    },
    // 提交日报
    submint() {
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '数据提交中...',
        forbidClick: true,
      });
      if (this.isclick) {
        this.reportTarget.reportContents = [];
        for (var x = 0; x < this.reportContentsList2.length; x++) {
          if (this.reportContentsList2[x].doubleWeekContent.trim() == '') {
            this.$toast('请完善上期半月报内容！');
            return false;
          }
        }
        for (var j = 0; j < this.reportContentsList1.length; j++) {
          if (this.reportContentsList1[j].doubleWeekContent.trim() == '') {
            this.$toast('请完善本期半月报内容！');
            return false;
          }
        }
        if (this.reportContentsList2[0].doubleWeekContent.length > 800) {
          this.$toast('上期半月报内容超过800字！');
          return false;
        }
        if (this.reportContentsList1[0].doubleWeekContent.length > 800) {
          this.$toast('本期半月报内容超过800字！');
          return false;
        }
        this.reportTarget.reportContents = this.reportContentsList2
          .concat(this.reportContentsList1)
          .concat(this.reportContentsList3);
        this.reportTarget.status = '1';
        this.isclick = false;
        updateReport(this.reportTarget).then((res) => {
          loading1.clear();
          this.isclick = true;
          if (res.code == 200) {
            this.$dialog
              .alert({
                title: '系统提示',
                message: '提交成功',
              })
              .then(() => {
                if (this.$route.query.reportId != undefined) {
                  window.location.replace(window.location.origin + '/mobile/myHistoricalDaily');
                } else {
                  this.onClickLeft();
                  // window.location.replace(window.location.origin + '/mobile/home');
                }
              });
          } else {
            this.$toast.fail(res.msg);
          }
        });
      }
    },
    getReportInfo() {
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      getReportInfo({ isContent: true }).then((res) => {
        loading1.clear();
        localStorage.setItem('powerGrade', res.data.positionId);
        this.powerGrade = res.data.positionId;
        this.showButton = res.data.showButton;
        this.reportTargetAll = res.data.reportTargetAll;
        this.reportTarget = res.data;
        this.type = res.data.userType;
        var reportContentsList1 = [];
        var reportContentsList2 = [];
        var reportContentsList3 = [];
        if (res.data.reportContents.length == '0') {
          // for (var i = 0; i < 6; i++) {
          //   var doubleWeekType = ""
          //   var title = ""
          //   if (i == "0") {
          //     doubleWeekType = "cpm"
          //     title = "产品"
          //   }
          //   if (i == "1") {
          //     doubleWeekType = "qdm"
          //     title = "渠道"
          //   }
          //   if (i == "2") {
          //     doubleWeekType = "yym"
          //     title = "运营"
          //   }
          //   if (i == "3") {
          //     doubleWeekType = "jpm"
          //     title = "竞品"
          //   }
          //   if (i == "4") {
          //     doubleWeekType = "cwm"
          //     title = "财务"
          //   }
          //   if (i == "5") {
          //     doubleWeekType = "rlm"
          //     title = "人力"
          //   }
          reportContentsList1.push({
            title: '',
            doubleWeekContent: '',
            doubleWeekType: '',
            contentTime: this.parseTime(new Date(), '{y}-{m}-{d}'),
            type: 3,
          });
          reportContentsList3.push({
            title: '',
            doubleWeekContent: '',
            doubleWeekType: '',
            contentTime: this.parseTime(new Date(), '{y}-{m}-{d}'),
            type: 1,
          });
          reportContentsList2.push({
            title: '',
            doubleWeekContent: '',
            doubleWeekType: '',
            contentTime: this.parseTime(new Date(), '{y}-{m}-{d}'),
            type: 2,
          });
          // }
          this.reportContentsList2 = reportContentsList2;
          this.reportContentsList1 = reportContentsList1;
          this.reportContentsList3 = reportContentsList3;
        } else {
          var reportContentsdata = res.data.reportContents;
          for (var i = 0; i < res.data.reportContents.length; i++) {
            // reportContentsdata[i].title = this.selectDictLabel(this.weekType, res.data.reportContents[i].doubleWeekType)
            if (res.data.reportContents[i].type == '2') {
              reportContentsList2.push(reportContentsdata[i]);
            }
            if (res.data.reportContents[i].type == '3') {
              reportContentsList1.push(reportContentsdata[i]);
            }
            if (res.data.reportContents[i].type == '1') {
              reportContentsList3.push(reportContentsdata[i]);
            }
          }
          if (reportContentsList2.length > 0) {
            this.reportContentsList2 = reportContentsList2;
          } else {
            reportContentsList2.push({
              title: '',
              doubleWeekContent: '',
              doubleWeekType: '',
              contentTime: this.parseTime(new Date(), '{y}-{m}-{d}'),
              type: 2,
            });
            this.reportContentsList2 = reportContentsList2;
          }
          if (reportContentsList1.length > 0) {
            this.reportContentsList1 = reportContentsList1;
          } else {
            reportContentsList1.push({
              title: '',
              doubleWeekContent: '',
              doubleWeekType: '',
              contentTime: this.parseTime(new Date(), '{y}-{m}-{d}'),
              type: 3,
            });
            this.reportContentsList1 = reportContentsList1;
          }
          if (reportContentsList3.length > 0) {
            this.reportContentsList3 = reportContentsList3;
          } else {
            reportContentsList3.push({
              title: '',
              doubleWeekContent: '',
              doubleWeekType: '',
              contentTime: this.parseTime(new Date(), '{y}-{m}-{d}'),
              type: 1,
            });
            this.reportContentsList3 = reportContentsList3;
          }
        }
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped>
.container {
  margin: 10px;
}

.container .van-collapse-item {
  margin-bottom: 10px;
  border-radius: 6px;
  overflow: hidden;
}

.linepAdd p {
  margin: 10px 0 0 0;
  font-size: 14px;
  color: #666;
}

.linepAdd .weekContent {
  padding-top: 5px;
}

.linepAdd .weekContent p {
  padding: 5px 0;
  margin: 0;
  padding-left: 10px;
}

.linepAdd .weekContent .texttitle {
  color: #0057ba;
  position: relative;
  padding-left: 10px;
}

.linepAdd .weekContent .texttitle .opint {
  position: absolute;
  left: 0px;
  top: 10px;
  margin-right: 6px;
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 10px;
  background-color: #004d8c;
}

.leftTitle {
  background-color: #74a4d9;
  color: #fff;
  display: inline-block;
  padding: 0 4px;
  border-radius: 2px;
}

.rightTitle {
  background-color: #e7b4bb;
  color: #fff;
  display: inline-block;
  padding: 0 4px;
  border-radius: 2px;
}
</style>
<style>
.linepAdd .van-cell__title {
  color: #1e5398;
  font-weight: 500;
  font-size: 16px;
}

.Btn100 {
  display: block;
  width: 100%;
  border-radius: 6px;
  color: #fff !important;
  background-color: #0057ba;
  border: 1px solid #0057ba;
  height: 44px;
}

.linepAdd .contentContainer {
  background-color: white;
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 10px;
}

.linepAdd .contentContainer .contentContainerTitle {
  color: #222;
}

.linepAdd .contentContainer .contentContainerTitle span {
  font-size: 12px;
  color: #666;
}

.linepAdd .contentContainer .van-field__control,
.linepAdd .contentContainerp .van-field__control {
  background-color: #f8f8f8;
  padding: 10px;
  border-radius: 8px;
}

.linepAdd .contentContainer .van-cell,
.linepAdd .contentContainerp .van-cell {
  padding: 0;
}

.colorbalck {
  color: #333333;
}

.collapsettitle .van-cell__title {
  color: #333;
}

.van-dialog__confirm,
.van-dialog__confirm:active {
  color: #0057ba;
}

.colorRed {
  color: red;
}
</style>