proginn-frontend/pages/otherpage/companyComplete/add.vue

<template>
  <div class="lenrn_content" style="margin: 20px 0 30px !important">
    <el-container>
      <el-container>
        <el-container>
          <el-header>
            <el-steps align-center :active="active" style="padding-top: 20px" finish-status="success">
              <el-step title="完善企业信息"></el-step>
              <el-step title="添加解决方案"></el-step>
              <el-step title="缴纳保证金"></el-step>
              <el-step title="提交审核"></el-step>
            </el-steps>
            <el-divider></el-divider>
          </el-header>
          <el-main>
            <el-form v-if="active==1" style="margin-top: 60px" ref="form" label-width="80px">
              <div class="text-content">
                <div class="title">1、技术服务商认证的优势？</div>
                <p class="desc">整包类型项目绝对优先派单给认证后的团队。</p>
                <p class="desc">客栈有大量中大型整包业务，需要技术服务团队的支持。</p>
                <div class="m40"></div>
                <div class="title">2、认证面向谁？</div>
                <p class="desc">需要以团队身份接单的用户，比如技术外包开发公司/工作室、SaaS产品及定制化服务公司等。</p>
                <div class="m40"></div>
                <div class="title">3、认证的条件要求？</div>
                <p class="desc">必须为企业法人单位，且注册资金不低于20万。</p>
                <div class="m40"></div>
                <div class="title">4、认证后还需要签约嘛？</div>
                <p class="desc">不用再签约即可接单。</p>
                <div class="m40"></div>
                <p class="tips">准确的企业信息是与客户建立信任感的桥梁</p>
                <div class="m40"></div>
                <p class="tips">主体信息登记</p>
                <div class="m40"></div>
                <el-form-item label="公司名称" style="max-width: 400px">
                  <el-input show-word-limit maxlength="30" v-model="company_info.name"></el-input>
                </el-form-item>
                <el-form-item label="营业执照">
                  <div class="common-upload">
                    <el-upload
                      class="avatar-uploader"
                      action="/upload_image"
                      :show-file-list="false"
                      :on-success="(response, file, fileList)=> upload_img_success(response, file, fileList,1)">
                      <img v-if="company_info.photo_url" :src="company_info.photo_url" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon" style="border-radius: 6px;border: 1px dashed #d9d9d9;height: 178px;line-height: 178px;width: 178px"></i>
                    </el-upload>
                  </div>
                </el-form-item>
                <el-form-item>
                  <el-button @click="active_set(2,false)" type="primary">下一步</el-button>
                </el-form-item>
              </div>
            </el-form>

            <el-form v-if="active==2" style="margin-top: 60px" ref="form" label-width="80px">
              <solution_add></solution_add>
            </el-form>

            <el-form v-if="active==3" style="margin-top: 60px" ref="form"  label-width="80px">
              <el-form-item label="视频封面">
                <div class="common-upload">
                  <el-upload
                    class="avatar-uploader"
                    action="/upload_image"
                    :show-file-list="false"
                    :on-success="(response, file, fileList)=> upload_img_success(response, file, fileList,3)">
                    <img v-if="saleInfo.video_img" :src="saleInfo.video_img" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon" style="border-radius: 6px;border: 1px dashed #d9d9d9;height: 178px;line-height: 178px;width: 178px"></i>
                  </el-upload>
                  <div class="look-img">
                    <div class="text-hover">
                      <span class="text">查看示意图</span>
                      <div class="img">
                        <img class="active-img2" src="@/assets/img/learn/video-add@2x.png"/>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <el-form-item  label="章节管理">
                <div v-for="(item,index) in video_list" :key="item.id">
                  <el-input style="margin-top: 10px" placeholder="请输入内容" v-model="item.video_name">
                    <template slot="prepend">第{{index+1}}章</template>
                    <el-button slot="append" @click="del_zj(index,item.id)" icon="el-icon-delete"></el-button>
                  </el-input>

                  <div v-for="(item2,index2) in item.list" :key="item2.id" style="background: #f6f6f6;padding: 10px;margin-top: 10px">
                    <el-input style="margin-top: 10px" placeholder="请输入课程名称" v-model="item2.video_name" class="input-with-select">
                      <div slot="prepend" style="width: 120px;text-align: center">{{index+1}}-{{index2+1}}</div>
                      <el-checkbox slot="append" style="margin-right: 15px" v-model="item2.checked">试看</el-checkbox>
                      <el-button slot="append"  @click="del_kc(index,index2,item2.id)" icon="el-icon-delete"></el-button>
                    </el-input>
                    <div style="padding-top: 10px;padding-bottom: 10px">
                      <el-upload
                        class="upload-demo"
                        style="display: inline-block"
                        action=""
                        :show-file-list="false"
                        :http-request="(e)=> fileChange(e,index,index2)">
                        <el-button size="small" type="primary">点击上传</el-button>
                      </el-upload>
                      <div class="file-upload" style="margin-top: 10px">
                        <el-progress :text-inside="true" :stroke-width="20" :percentage="item2.progress"></el-progress>
                      </div>
                    </div>
                  </div>

                  <div style="background: #f6f6f6;padding: 10px;margin-top: 10px;text-align:center">
                    <el-button @click="add_new_kc(index)" :disabled="kc_disabled" type="primary">添加新的课程</el-button>
                    <el-button @click="add_new_zj()" :disabled="zj_disabled" type="primary">添加新的章节</el-button>
                  </div>
                </div>

              </el-form-item>
              <el-form-item>
                <el-button @click="active_set(2,true)" type="primary">上一步</el-button>
                <el-button @click="active_set(4,false)" type="primary">下一步</el-button>
              </el-form-item>
            </el-form>

            <el-form v-if="active==4" style="margin-top: 60px" ref="form"  label-width="80px">
              <el-form-item style="display: none" label="群二维码">
                <el-upload
                  class="avatar-uploader"
                  action="/upload_image"
                  :show-file-list="false"
                  :on-success="(response, file, fileList)=> upload_img_success(response, file, fileList,4)">
                  <img v-if="saleInfo.ewm" :src="saleInfo.ewm" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon" style="border-radius: 6px;border: 1px dashed #d9d9d9;height: 178px;line-height: 178px;width: 178px"></i>
                </el-upload>
              </el-form-item>
              <el-form-item label="公告栏">
                <div class="content-field">
                  <div class="content-editor">
                    <editor
                      :hideImage="false"
                      :content="saleInfo.notice_msg"
                      @change="(val)=> editor_change(val,3)"
                      placeholder="公告栏用于发布课程通知，常见用于课件下载等信息。"></editor>
                  </div>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button @click="active_set(3,true)" type="primary">上一步</el-button>
                <el-button @click="active_set(5,false)" type="primary">确认提交</el-button>
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>
      </el-container>
    </el-container>

    <!-- vueCropper 剪裁图片实现-->
    <el-dialog title="图片剪裁" :visible.sync="dialogVisible" append-to-body>
      <div class="cropper-content">
        <div class="cropper" style="text-align:center">
          <vueCropper
            ref="cropper"
            :img="option.img"
            :outputSize="option.size"
            :outputType="option.outputType"
            :info="true"
            :full="option.full"
            :canMove="option.canMove"
            :canMoveBox="option.canMoveBox"
            :original="option.original"
            :autoCrop="option.autoCrop"
            :fixed="option.fixed"
            :fixedNumber="option.fixedNumber"
            :centerBox="option.centerBox"
            :infoTrue="option.infoTrue"
            :fixedBox="option.fixedBox"
          ></vueCropper>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="finish">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { mapState } from "vuex";
  import editor from "@/components/editor";
  import solution_add from "@/components/company/solution_add";
  import multiUploader from '@/components/multi-uploader';

  if(process.client)
  {
    import('@/assets/js/aliyun-upload-sdk/aliyun-upload-sdk-1.5.2.min.js');
  }

  export default {
    head: {
      title: '新建咨询服务',
    },
    head() {
      return {
        script: [
          {src: 'https://gosspublic.alicdn.com/aliyun-oss-sdk-6.13.0.min.js'},
        ]
      }
    },
    components: {
      editor,
      multiUploader,
      solution_add
    },
    data () {
      return {
        sale_id: '', // 编辑时
        kc_disabled:false,
        zj_disabled:false,
        active:1,
        selectedConsultCate: [],//选中的技能分类
        consultCate: [], // 技能分类数据源
        saleInfo:{
          point:"1",
          pricetype:"1",
          img_icon:"",
          video_img:"",
          ewm:"",
          desc:"",
          price: '0.00',
          yprice: '0.00'
        },
        dialogVisible: false,
        // 裁剪组件的基础配置option
        option: {
          img: '', // 裁剪图片的地址
          type:'',//类型
          info: true, // 裁剪框的大小信息
          outputSize: 1, // 裁剪生成图片的质量
          outputType: 'jpeg', // 裁剪生成图片的格式
          canScale: false, // 图片是否允许滚轮缩放
          autoCrop: true, // 是否默认生成截图框
          // autoCropWidth: 300, // 默认生成截图框宽度
          // autoCropHeight: 200, // 默认生成截图框高度
          fixedBox: true, // 固定截图框大小 不允许改变
          fixed: true, // 是否开启截图框宽高固定比例
          fixedNumber: [16, 9], // 截图框的宽高比例
          full: true, // 是否输出原图比例的截图
          canMoveBox: false, // 截图框能否拖动
          original: false, // 上传图片按照原始比例渲染
          centerBox: false, // 截图框是否被限制在图片里面
          infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        },
        teacherInfo:{
          img:""
        },
        company_info:{},//公司信息
      }
    },
    mounted () {
      this.needLogin();
      this.getCompanyInfo();
      var sale_id = this.$route.query.id ? this.$route.query.id : 0;
      this._getConsultCate()
      if (sale_id!=0) {
        this.sale_id=sale_id;
        this.getDetail();
      }
      if (this.saleInfo.price > 0)
      {
        this.saleInfo.pricetype="2";
      }
      else
      {
        this.saleInfo.pricetype="1";
      }
    },
    methods: {
      time_type(zj_id,kc_id,type){
        this.video_list[zj_id].list[kc_id].time_type=type;
      },
      // 点击裁剪，这一步是可以拿到处理后的地址
      finish() {
        this.$refs.cropper.getCropBlob((data) => {
          console.log("裁剪",data)
          let formData = new FormData();
          formData.append("file", data);
          this.$axios.$post('/upload_image', formData,{
            headers: {
              "Content-Type": "multipart/form-data"
            }
          }).then(res => {
            this.dialogVisible = false
            this.type=0;
            if(this.option.type==1)
            {
              this.saleInfo.img_icon=res.filename;
            }
            else if(this.option.type==2)
            {
              this.teacherInfo.img=res.filename;
            }
            else if(this.option.type==3)
            {
              this.saleInfo.video_img=res.filename;
            }
          }).catch(err => {

          })
        })
      },
      add_new_zj(){
        this.add_three(2);
      },
      add_new_kc(zj_id){
        this.add_three(3,0,zj_id);
      },
      del_kc(zj_id,kc_id,id){
        /*for(var i=0;i<this.video_list.length;i++)
        {
          for(var j=0;j<this.video_list[i].list.length;j++)
          {
            if(zj_id==i && kc_id==j)
            {
              this.video_list[i].list.splice(j,1);
            }
          }
        }*/
        this.$axios.$post('/api/sale/del_video', { sale_id: this.sale_id,id:id}).then(res => {
          if (res.status === 1) {
            this.video_list=res.data;
          }
        }).catch(err => {

        })
      },
      del_zj(zj_id,id){
        if(this.video_list.length==1){
          this.$message.error('已经是最后一个章节了不能删除了')
          return false
        }
       /* for(var i=0;i<this.video_list.length;i++)
        {
          if(zj_id==i)
          {
            this.video_list.splice(i,1);
          }
        }*/
        this.$axios.$post('/api/sale/del_video', { sale_id: this.sale_id, id}).then(res => {
          if (res.status === 1) {
            this.video_list=res.data;
          }
        }).catch(err => {

        })
      },
      active_set(val,return_=true){
        if(return_)
        {
          this.active=val;
          return;
        }
        if(val==2)
        {
          this.saleInfo.cate_id_one=this.saleInfo.cate_id;
          this.saleInfo.cate_id_two=0;
          this.add_one();
        }
        else if(val==3)
        {
           this.add_two();
        }
        else if(val==4)
        {
          this.add_three();//效验课程数据
        }
        else if(val==5)
        {
          this.add_fore();//提交审核
        }
        else
        {
          this.active=val;
        }
      },
      upload_img_success(res, file, fileList,type){
        if(type==1)
        {
          this.company_info.photo_url=res.filename;
        }
        else if(type==2)
        {
          let filename=res.filename;
          // 上传成功后将图片地址赋值给裁剪框显示图片
          this.$nextTick(() => {
            this.option.img =filename;
            this.option.fixedNumber=[100,100]
            this.option.type=type;
            this.dialogVisible = true
          })
        }
        else if(type==3)
        {
          let filename=res.filename;
          // 上传成功后将图片地址赋值给裁剪框显示图片
          this.$nextTick(() => {
            this.option.img =filename;
            this.option.fixedNumber=[7,5]
            this.option.type=type;
            this.dialogVisible = true
          })
        }
        else if(type==4)
        {
          this.saleInfo.ewm=res.filename;
        }
      },
      editor_change(val,type)//编辑器内容发生改变的时候
      {
        if(type==1) {
          this.saleInfo.content = val;
        }
        else if(type==2) {
          this.teacherInfo.content = val;
        }
        else if(type==3) {
          this.saleInfo.notice_msg = val;
        }
      },
      fileChange (e,zj_id,kc_id) {
        let videoFile = e.file
        let filename=e.file.name;
        this.createUploader(videoFile,zj_id,kc_id,filename)
      },
      createUploader (videoFile,zj_id,kc_id,filename) {
        let self = this
        let uploader = new AliyunUpload.Vod({
          timeout: 60000,
          partSize: 1048576,
          parallel: 5,
          retryCount: 3,
          retryDuration: 2,
          region: 'cn-shanghai',
          userId: '1024',
          // 添加文件成功
          addFileSuccess: function (uploadInfo) {
            self.statusText = '添加文件成功, 等待上传...'
            console.log("addFileSuccess: " + uploadInfo.file.name)
          },
          // 开始上传
          onUploadstarted: function (uploadInfo) {
            self.$axios.$post("/api/sale/video", {filename: uploadInfo.file.name}).then(({data}) => {
              let uploadAuth = data.UploadAuth;
              let uploadAddress = data.UploadAddress;
              let videoId = data.VideoId;
              self.videoId = data.VideoId;
              self.video_list[zj_id].list[kc_id].temp_video_id=videoId;
              self.video_list[zj_id].list[kc_id].video_name=data.filename;
              uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)
            })
            self.statusText = '文件开始上传...'
            console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
          },
          // 文件上传成功
          onUploadSucceed: function (uploadInfo) {
            //self.video_list[zj_id].list[kc_id].video_id= self.video_list[zj_id].list[kc_id].temp_video_id;
            //self.add_three(4);//保存课程
          },
          // 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
          onUploadProgress: function (uploadInfo, totalSize, progress) {
            let progressPercent = Math.ceil(progress * 100)
            self.video_list[zj_id].list[kc_id].progress=progressPercent;
            self.video_list[zj_id].list[kc_id].video_id= self.video_list[zj_id].list[kc_id].temp_video_id;
          },
        })
        uploader.addFile(videoFile);
        uploader.startUpload();//上传文件
      },
      /** 获取咨询分类 */
      async _getConsultCate () {
        this.$axios.$post('/api/sale/cateListYes', { type: 4, point: 1 }).then(res => {
          if (res.status === 1) {
            let consultCate = res.data || []
            this.consultCate = consultCate.map(item => {
              let children = item.child_list.map(child => {
                return {
                  value: child.category_id,
                  label: child.name
                }
              })
              return {
                value: item.category_id,
                label: item.name,
                children: children
              }
            })
          }
        }).catch(err => {
          console.log('get consult cate error: ', err)
        })
      },
      async getCompanyInfo(){
        let res=await this.$axios.post('/uapi/pub/info/company/verify_company/info');
        this.company_info=res.data.data;
      },
      /** 第一步添加 */
      async add_one() {
        let res=await this.$axios.post('/uapi/pub/bool/company/company_info/check_user_exist');
        let status=res.data.status;
        if(status==1)//公司存在，执行修改操作
        {
          res=await this.$axios.post('/api/company_info/save_all',{base:'{"name":"'+this.company_info.name+'","photo_url":"'+this.company_info.photo_url+'"}'});
        }
        else//执行添加的操作
        {
          res=await this.$axios.post('/api/remote/save_company_verify_apply',this.company_info);
        }
        if(res.data.status==1)
        {
          this.active = 2;
        }
      },
      /** 第二步添加 */
      async add_two() {
        if(!this.teacherInfo.name)
        {
          this.$message.error('讲师名称必须填写');
          return false;
        }

        if(!this.teacherInfo.op)
        {
          this.$message.error('职称必须填写');
          return false;
        }

        if(!this.teacherInfo.img)
        {
          this.$message.error('封面必须上传');
          return false;
        }

        if(!this.teacherInfo.content)
        {
          this.$message.error('自我介绍必须填写');
          return false;
        }
        this.teacherInfo.sale_id=this.sale_id;
        var data=JSON.stringify(this.teacherInfo);
        await this.$axios.$post('/api/sale/sale_add_two', { data }).then(res => {
          if (res.status === 1) {
            this.active=3;
          }
        }).catch(err => {

        })
      },
      /** 第三步添加 */
      async add_three(type=1,kc_id=0,zj_id=0) {
        var video_list=JSON.stringify(this.video_list);
        var saleInfo=JSON.stringify(this.saleInfo);
        await this.$axios.$post('/api/sale/sale_add_three', {type, sale_id:this.sale_id, video_list,saleInfo }).then(res => {
          if (res.status === 1) {
            if(!res.data.result)
            {
              this.video_list=res.data.list;
              if(type==1)
              {
                this.active=4;
              }
              else if(type==2)
              {
                var new_object={"id":"","video_name":"","list":[{"id":"","kc_id":"","progress":0,"video_name":"","checked":false,"time_type":0,"ymd":"","his":""}]};
                this.video_list.push(new_object);
                this.add_video();
              }
              else if(type==3)
              {
                var new_object={"id":"","kc_id":"","progress":0,"video_name":"","checked":false,"time_type":0,"ymd":"","his":""};
                this.video_list[zj_id].list.push(new_object);
                this.add_video();
              }
            }
            else
            {
              this.$message.error(res.data.result_msg);
            }
          }
        }).catch(err => {

        })
      },
      /** 第四步添加 */
      async add_fore() {
        var video_list=JSON.stringify(this.video_list);
        var saleInfo=JSON.stringify(this.saleInfo);
        await this.$axios.$post('/api/sale/sale_add_fore', {sale_id:this.sale_id, video_list, saleInfo}).then(res => {
          if (res.status === 1) {
            this.$message.success('我们已经收到您的审核提交，请耐心等待');
            location.href = `/workbench/learn/index`
          }
        }).catch(err => {

        })
      },
      /** 课程添加 */
      async add_video() {
        this.kc_disabled=true;
        this.zj_disabled=true;
        var data=JSON.stringify(this.video_list);
        await this.$axios.$post('/api/sale/sale_add_video', { data,sale_id:this.sale_id}).then(res => {
          if (res.status === 1) {
            this.video_list=res.data;
          }
          this.kc_disabled=false;
          this.zj_disabled=false;
        }).catch(err => {
          this.kc_disabled=false;
          this.zj_disabled=false;
        })
      },
      /** 课程添加 */
      async getDetail() {
        await this.$axios.$post('/api/sale/info', {sale_id:this.sale_id}).then(res => {
          if (res.status === 1) {
            if(res.data.video.length>0)
            {
              this.video_list=res.data.video;
            }
            this.saleInfo=res.data.sale;
            this.teacherInfo=res.data.teacher;
            this.selectedConsultCate = [res.data.sale.cate_id_one, res.data.sale.cate_id_two]
          }
        }).catch(err => {

        })
      },
    }
  }
</script>

<style scope lang="scss">
  @import "@/assets/css/consult/create.scss";
  .common-upload {
    display: flex;
    align-items: end;
    .look-img {
      margin-left: 14px;
      .text {
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        color: #308eff;
        cursor: pointer;
      }
      .text-hover:hover {
        position: relative;
        .img {
          display: block;
        }
      }
      .img {
        background: #fff;
        border: 1px solid #e0e5ed;
        box-shadow: 0px 2px 20px 0px rgba(22,40,63,0.15);
        border-radius: 10px;
        text-align: center;
        position: relative;
        position: absolute;
        top: -120px;
        left: 0;
        width: 300px;
        height: 120px;
        display: none;
        transition: all ease .3s;
        .active-img2 {
          width: 234px;
          height: 71px;
          background-size: cover;
          overflow: hidden;
          margin-top: 24px;
        }
        .active-img1 {
          width: 262px;
          height: 78px;
          background-size: cover;
          overflow: hidden;
          margin-top: 22px;
        }
      }
      .img:after {
        content: '';
        width: 0;
        height: 0;
        border-right: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-top: 10px solid #e0e5ed;
        border-left: 10px solid transparent;
        position: absolute;
        left: 24px;
        bottom: -20px;
      }
      .img:before {
        content: '';
        width: 0;
        height: 0;
        border-right: 9px solid transparent;
        border-bottom: 9px solid transparent;
        border-top: 9px solid #fff;
        border-left: 9px solid transparent;
        position: absolute;
        left: 25px;
        bottom: -18px;
        z-index: 1;
      }
    }
  }
</style>
<style>
  .el-select .el-input {
    width: 130px;
  }
  .avatar-uploader img{max-width: 200px}
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  .lenrn_content{width: 1000px;margin: 0px auto;background: white}
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }
  input[type="number"]{
    -moz-appearance: textfield !important;
  }
  .el-form-item__content .content-field span{line-height: normal}
  .cropper-content{
    width: 100%;
    height: 300px;
  }
  .cropper {
    width: 100%;
    height: 240px;
  }
  .btnGroup{
    float: right;
    margin-top: 10px;
    margin-right: 15px;
  }
</style>
<style lang="scss">
  // 编辑器样式
  .content-editor {
    .my-editor {
      .ql-snow {
        border: 1px solid #d7dfe8 !important;
        border-radius: 3px 3px 0 0 !important;
      }
      .quill-editor {
        border-width: 1px !important;
        border-top: 0 !important;
        border-color: #d7dfe8 !important;
        border-radius: 0 0 3px 3px !important;
      }
    }
  }
  // 图片上传器样式
  .consult-image-uploader {
    .el-upload-list__item {
      width: 300px !important;
      height: 168.75px !important;
      line-height: 168.75px !important;
    }
    .el-upload--picture-card {
      width: 300px !important;
      height: 168.75px !important;
      line-height: 168.75px !important;
      .el-upload-list__item-thumbnail {
        object-fit: scale-down !important;
      }
    }
    .el-upload-list--picture-card {
      .el-upload-list__item-thumbnail {
        object-fit: scale-down !important;
      }
    }
  }

  .text-content{
    margin-left: 30px;
    margin-bottom: 40px;
    .title{
      font-weight: bold;
      font-size: 16px;
      height: 30px;
      line-height: 30px;
    }
    p{
      font-size: 14px;
      margin-top: 10px;
      font-weight: bold;
    }
    .m40{
      margin-top: 40px;
    }

    .tips{
      color:#606266;
    }
  }
</style>