中图智慧H5
parent: 0d362f45 | patch | commit | ignore whitespace
zhang
2023-12-08 a355bc72225a2981a1767ad23d5290f9c758a8c4 
'更新页面'
12 files modified
11 files added
774 ■■■■■ changed files
public/images/Addmessage.png patch | view | raw | blame | history
public/images/Anonymouscomments.png patch | view | raw | blame | history
public/images/Code.png patch | view | raw | blame | history
public/images/Directcomments.png patch | view | raw | blame | history
public/images/Enter.png patch | view | raw | blame | history
public/images/attention.png patch | view | raw | blame | history
public/images/sign.png patch | view | raw | blame | history
public/images/signtitle.png patch | view | raw | blame | history
public/images/username.png patch | view | raw | blame | history
public/index.html 2 ●●●●● patch | view | raw | blame | history
src/App.vue 1 ●●●●● patch | view | raw | blame | history
src/main.js 8 ●●●●● patch | view | raw | blame | history
src/router/page/index.js 17 ●●●●● patch | view | raw | blame | history
src/styles/base/index.scss 9 ●●●●● patch | view | raw | blame | history
src/styles/index.scss 3 ●●●●● patch | view | raw | blame | history
src/views/Addmessage/index.vue 94 ●●●●● patch | view | raw | blame | history
src/views/Checkandassess/index.vue 68 ●●●●● patch | view | raw | blame | history
src/views/discrimination/index.vue 23 ●●●●● patch | view | raw | blame | history
src/views/examine/index.vue 99 ●●●●● patch | view | raw | blame | history
src/views/layout/index.vue 32 ●●●●● patch | view | raw | blame | history
src/views/login/index.vue 148 ●●●●● patch | view | raw | blame | history
src/views/message/index.vue 127 ●●●●● patch | view | raw | blame | history
src/views/toexamine/index.vue 143 ●●●●● patch | view | raw | blame | history 
 public/images/Addmessage.png




 public/images/Anonymouscomments.png




 public/images/Code.png




 public/images/Directcomments.png




 public/images/Enter.png




 public/images/attention.png




 public/images/sign.png




 public/images/signtitle.png




 public/images/username.png




 public/index.html


@@ -3,7 +3,7 @@


  <head>


    <meta charset="utf-8" />


    <meta http-equiv="X-UA-Compatible" content="IE=edge" />


    <meta name="viewport" content="width=device-width,initial-scale=1.0" />


    <meta name="viewport" content="width=device-width, initial-scale=1.0" />


    <link rel="icon" href="<%= BASE_URL %>big.ico" />




    <title>中图铜镜</title>




 src/App.vue


@@ -22,4 +22,5 @@


  -webkit-font-smoothing: antialiased;


  -moz-osx-font-smoothing: grayscale;


}




</style>




 src/main.js


@@ -13,10 +13,8 @@


import "lib-flexible/flexible.js";


import "./permission";


import "./components/autoRegister";


import Vant from 'vant';


import { ImagePreview } from 'vant';


import 'vant/lib/index.css';




import Vant from "vant";


import "vant/lib/index.css";




import DC from "@dvgis/dc-sdk/dist/dc.base.min"; //基础包


import DcCore from "@dvgis/dc-sdk/dist/dc.core.min"; //核心包


@@ -43,7 +41,7 @@


Vue.prototype.$EventBus = EventBus;


Vue.use(ElementUI);


Vue.use(Vant);


Vue.use(ImagePreview);




Vue.use(VueAxios, axios);




new Vue({




 src/router/page/index.js


@@ -13,6 +13,9 @@


  {


    path: "/",


    component: () => import("../../views/layout/index.vue"),


    meta: {


      keepAlive: true, // 启用缓存路由


    },


  },


  //身份判别


  {


@@ -23,9 +26,17 @@


  {


    path: "/login",


    component: () => import("../../views/login/index.vue"),


    meta: {


      title: "home页面",


    },


  },




  //添加留言


  {


    path: "/Addmessage",


    component: () => import("../../views/Addmessage/index.vue"),


  },


  //去评分


  {


    path: "/toexamine",


    component: () => import("../../views/toexamine/index.vue"),


  },


];






 src/styles/base/index.scss


@@ -1224,3 +1224,12 @@


    float: right;


    margin-left: 10px;


}




.my-uploader .van-uploader__preview-image {


    width: 100px !important;


    height: 100px !important;


  }


  .my-uploader .van-uploader__upload {


    width: 100px !important;


    height: 100px !important;


  }




 src/styles/index.scss


@@ -9,6 +9,9 @@


    src: url(./font/Roboto-Bold.ttf);


}




.van-uploader__upload{


width: 300px;


}


.pageContainer {


    color: #fff;


    width: 100%;




 src/views/Addmessage/index.vue


New file


@@ -0,0 +1,94 @@


<!--留言-->


<template>


  <div class="Addmessage">


    <van-cell-group inset>


      <van-field


        v-model="messagecom"


        class="van-hairline"


        rows="5"


        autosize


        type="textarea"


        placeholder="说点什么吧"


        show-word-limit


      />


    </van-cell-group>


    <div class="my-uploader">


      <van-uploader v-model="fileList" multiple />


    </div>


    <div class="attention">


      <img src="images/attention.png" />


      <span>请勿涉及不文明及违规内容，违法必究！</span>


    </div>


    <div class="bottom">


      <van-button type="primary" @click="submit">提交</van-button>


    </div>


  </div>


</template>


              


    <script>


export default {


  data() {


    return {


      messagecom: "",


      fileList: []


    };


  },




  computed: {},


  created() {},


  methods: {


    submit() {


      this.$router.push({


        path: "/"


      });


    }


  }


};


</script>


              


<style scoped lang="scss">


.Addmessage {


  height: 100vh;


  width: 100%;


  position: relative;


  padding: 20px;


  [class*="van-hairline"]::after {


    border: none;


    font-size: 40px;


  }


  .van-cell-group--inset {


    margin: 0px;


    .van-cell {


      padding: 0px;


      font-size: 20px;


    }


  }


  .attention {


    display: flex;


    align-items: center;


    margin: 10px 0px;


    img {


      width: 16px;


      height: 16px;


      margin-right: 4px;


    }


    span {


      font-size: 14px;


      color: #999999;


    }


  }


  .bottom {


    position: absolute;


    bottom: 50px;


    width: 100%;


    .van-button {


      width: 90%;


      font-size: 18px;


      border-radius: 5px;


      background: linear-gradient(to right, #01bdfc, #017bfc);


    }


  }


}


</style>


<style >


</style>




 src/views/Checkandassess/index.vue


@@ -1,14 +1,36 @@


<!--查考核-->


<template>


  <div class="Checkandassess">


    <P>查考核</P>


    <div class="view" v-for="(item,index) in ViewData" :key="index">


      <p class="TaskNumber">


        <span>考核任务编号:{{item.id}}</span>


        <span :class="item.fraction=='评估中'?'evaluation':'number'">{{item.fraction}}</span>


      </p>


      <p class="Tasktime">


        <span>发起日期：</span>


        <span>{{item.time}}</span>


      </p>


    </div>


  </div>


</template>


          


<script>


export default {


  data() {


    return {};


    return {


      ViewData: [


        {


          id: "202402",


          fraction: "评估中",


          time: "2024-01-04"


        },


        {


          id: "202401",


          fraction: "98",


          time: "2024-01-02"


        }


      ]


    };


  },




  computed: {},


@@ -18,5 +40,47 @@


</script>


          


<style scoped lang="scss">


.Checkandassess {


  padding: 20px;


  height: 100%;


  overflow: auto;


  background: #f5f5f5;


  .view {


    width: 100%;


    padding: 20px;


    background: white;


    border-radius: 8px;


    margin-bottom: 15px;


    .TaskNumber {


      display: flex;


      span:nth-child(1) {


        font-size: 16px;


        font-weight: bold;


        line-height: 40px;


      }


      .evaluation {


        margin-left: auto;


        border: 1px solid #f2bf42;


        background: rgba(242, 191, 66, 0.1);


        padding: 0px 10px;


        line-height: 30px;


        height: 30px;


        color: #f2bf42;


      }


      .number {


        color: #017bfc;


        margin-left: auto;


        font-size: 20px;


        font-weight: bold;


      }


    }


    .Tasktime {


      font-size: 14px;


      span:nth-child(1) {


        color: #999999;


      }


    }


  }


}


</style>


          




 src/views/discrimination/index.vue


@@ -14,7 +14,10 @@


      <img src="images/getcheck.png" class="check" @click="checkin(false)" v-show="!checkinis" />


    </div>


    <div class="button">


      <el-button type="primary" @click="Enterimmediately()">立即进入</el-button>


      <p class="enter" @click="Enterimmediately()">


        <span>直接进入</span>


        <img src="images/Enter.png" />


      </p>


    </div>


  </div>


</template>


@@ -100,8 +103,22 @@


.button {


  text-align: center;


  margin-top: 40px;


  .el-button {


    width: 80%;


  display: flex;


  .enter {


    display: flex;


    margin: 0 auto;


    padding: 7px 20px;


    border-radius: 30px;


    border: 1px solid #017bfc;


    display: flex;


    align-items: center;


    span {


      font-size: 16px;


      margin-right: 5px;


    }


    img {


      height: 12px;


    }


  }


}


</style>




 src/views/examine/index.vue


@@ -1,22 +1,103 @@


<!--考核-->


<template>


  <div class="examine">


    <P>考核</P>


  <div class="Checkandassess">


    <div class="view" v-for="(item,index) in ViewData" :key="index">


      <p class="TaskNumber">


        <span>考核任务编号:{{item.id}}</span>


        <span :class="item.fraction=='待完成'?'evaluation':'evaluationget'">{{item.fraction}}</span>


      </p>


      <p class="Tasktime">


        <span>考核任务:</span>


        <span>对{{item.Assessmentpeople}}({{item.department}})进行评分</span>


      </p>


      <van-button @click="toexamine(item)">去评分</van-button>


    </div>


  </div>


</template>


        


  <script>


          


<script>


export default {


  data() {


    return {};


    return {


      ViewData: [


        {


          id: "202402",


          fraction: "待完成",


          Assessmentpeople: "王五",


          department: "技术部"


        },


        {


          id: "202401",


          fraction: "已完成",


          Assessmentpeople: "张三",


          department: "技术部"


        }


      ]


    };


  },




  computed: {},


  created() {},


  methods: {}


  methods: {


    toexamine(item) {


      this.$router.push({


        path: "/toexamine",


        query: { name: item.Assessmentpeople }


      });


    }


  }


};


</script>


        


  <style scoped lang="scss">


          


<style scoped lang="scss">


.Checkandassess {


  padding: 20px;


  height: 100%;


  overflow: auto;


  background: #f5f5f5;


  .view {


    width: 100%;


    padding: 20px;


    background: white;


    border-radius: 8px;


    margin-bottom: 15px;


    .TaskNumber {


      display: flex;


      span:nth-child(1) {


        font-size: 16px;


        font-weight: bold;


        line-height: 40px;


      }


      .evaluation {


        margin-left: auto;


        border: 1px solid #f2bf42;


        background: rgba(242, 191, 66, 0.1);


        padding: 0px 10px;


        line-height: 30px;


        height: 30px;


        color: #f2bf42;


      }


      .evaluationget {


        margin-left: auto;


        border: 1px solid #30d17c;


        background: rgba(48, 209, 124, 0.1);


        padding: 0px 10px;


        line-height: 30px;


        height: 30px;


        color: #30d17c;


      }


    }


    .Tasktime {


      font-size: 16px;


    }


    .van-button {


      margin-top: 10px;


      width: 100%;


      color: white;


      background: linear-gradient(163deg, #01bdfc 0%, #017bfc 100%);


      border-radius: 8px;


    }


  }


}


</style>


        


          




 src/views/layout/index.vue


@@ -2,10 +2,12 @@


  <div class="appdefalut">


    <!-- 主体内容展示区域 -->


    <div class="content">


      <component :is="comName"></component>


      <keep-alive>


        <component :is="comName"></component>


      </keep-alive>


    </div>


    <!-- 底层tab切换栏 -->


    <div class="footer">


    <div class="footer" v-show="hidshow">


      <div


        class="footerin"


        v-for="(item,index) in TabName"


@@ -38,7 +40,10 @@


  },


  data() {


    return {


      comName: "message", //默认展示页


      docmHeight: document.documentElement.clientHeight, //默认屏幕高度


      showHeight: document.documentElement.clientHeight, //实时屏幕高度


      hidshow: true, //显示或者隐藏footer


      comName: "examine", //默认展示页


      TabName: [],


      ygTabName: [


        {


@@ -93,6 +98,7 @@


      this.comName = label;


    }


  },




  computed: {},


  created() {


    if (localStorage.getItem("tokensave") == null) {


@@ -104,6 +110,22 @@


    } else {


      this.TabName = this.ygTabName;


    }


  },


  mounted() {


    window.onresize = () => {


      return (() => {


        this.showHeight = document.body.clientHeight;


      })();


    };


  },


  watch: {


    showHeight: function() {


      if (this.docmHeight > this.showHeight) {


        this.hidshow = false;


      } else {


        this.hidshow = true;


      }


    },


  }


};


</script>


@@ -114,12 +136,13 @@


  height: 100vh;


  .content {


    width: 100%;


    height: calc(100% - 70px);


    height: calc(100% - 80px);


    box-sizing: border-box;


    overflow: auto;


  }


  .footer {


    position: fixed;


    height: 80px;


    bottom: 0;


    left: 0;


    width: 100%;


@@ -127,6 +150,7 @@


    justify-content: center;


    align-items: center;


    padding: 10px 0px;


    background: white;


    .footerin {


      flex: 1;


      text-align: center;




 src/views/login/index.vue


@@ -1,30 +1,160 @@


<!--公司员工登录页面-->


<template>


  <div class="login">


    <el-button type="success" @click="login()">登录</el-button>


    <div class="title">


      <img src="images/sign.png" />


      <img src="images/signtitle.png" />


    </div>


    <div class="loginin">


      <div class="users">


        <img src="images/username.png" />


        <van-field v-model="username" placeholder="请输入用户名" />


      </div>


      <div class="yanzhen">


        <div class="Codes">


          <img src="images/Code.png" />


          <van-field v-model="Code" placeholder="请输入验证码" />


        </div>


        <div class="verification" @click="getCodes()">


          <p>{{ counting > 0 ? `${counting}秒后重新获取` : '获取验证码' }}</p>


        </div>


      </div>


    </div>


    <div class="button">


      <van-button round block native-type="submit" @click="login()">登录</van-button>


    </div>


    <!-- <el-button type="success">登录</el-button> -->


  </div>


</template>


        


  <script>


<script>


import { showSuccessToast, showFailToast } from "vant";


export default {


  data() {


    return {};


    return {


      username: "",


      Code: "",


      getCode: "",


      counting: 0


    };


  },




  computed: {},


  created() {},


  methods: {


    // 客户模块


    // 手机号校验


    usernamecheck(key) {


      const usernameyeno = /^1[3-9]\d{9}$/.test(key);


      if (usernameyeno == false) {


        this.$toast.fail("用户名错误");


        return false;


      } else {


        return true;


      }


    },


    // 获取验证码


    getCodes() {


      const isValid = this.usernamecheck(this.username);


      if (isValid) {


        this.counting = 60;


        const timer = setInterval(() => {


          if (this.counting > 0) {


            this.counting--;


          }


        }, 1000);


      }


    },


    // 登录


    login() {


      this.$router.push({


        path: "/"


      });


      localStorage.setItem("tokensave", "222");


      const isValid = this.usernamecheck(this.username);


      if (isValid) {


        this.$toast.success("登录成功");


        setTimeout(() => {


          localStorage.setItem("tokensave", "222");


          this.$router.push("/");


        }, 1000);


      }


    }


  }


};


</script>


        


  <style scoped lang="scss">


<style scoped lang="scss">


.van-cell {


  background: #f5f5f5;


  font-size: 20px;


  padding: 0px;


}


.login {


  padding: 30px;


  .title {


    img {


      display: block;


    }


    img:nth-child(1) {


      margin: 20px auto;


      width: 70px;


    }


    img:nth-child(2) {


      margin: 0 auto;


      width: 200px;


    }


  }


  .loginin {


    margin-top: 60px;


    .users {


      background: #f5f5f5;


      width: 100%;


      height: 60px;


      display: flex;


      align-items: center;


      padding: 5px 10px;


      margin-bottom: 20px;


      img {


        width: 30px;


        height: 30px;


      }


    }


    .yanzhen {


      display: flex;


      .Codes {


        flex: 1;


        background: #f5f5f5;


        height: 60px;


        display: flex;


        align-items: center;


        padding: 5px 10px;


        margin-bottom: 20px;


        img {


          width: 30px;


          height: 30px;


        }


      }


      .verification {


        margin-left: 10px;


        height: 60px;


        background: linear-gradient(163deg, #01bdfc 0%, #017bfc 100%);


        p {


          font-size: 20px;


          color: white;


          padding: 0px 15px;


          line-height: 60px;


        }


      }


    }


  }


  .button {


    width: 100%;


    margin-top: 20px;




    .van-button {


      background: linear-gradient(163deg, #01bdfc 0%, #017bfc 100%);


      border-radius: 8px;


      color: white;


      height: 50px;


      font-size: 18px;


    }


  }


}


</style>


        




 src/views/message/index.vue


@@ -1,27 +1,53 @@


<!--留言-->


<template>


  <div class="message">


    <!-- 头部个人信息区域 -->


    <div class="info">


      <img


        class="img"


        src="https://img1.baidu.com/it/u=732125282,3277481018&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300"


      />


      <div class="infoin">


        <p class="name">匿名用户</p>


        <p class="time">一个小时前发布</p>


  <div class="boxliuyan">


    <div class="message" v-for="(comment, index) in 3" :key="index">


      <!-- 头部个人信息区域 -->


      <div class="info">


        <img


          class="img"


          src="https://img1.baidu.com/it/u=732125282,3277481018&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300"


        />


        <div class="infoin">


          <p class="name">匿名用户</p>


          <p class="time">一个小时前发布</p>


        </div>


      </div>


      <!-- 文案区域 -->


      <p class="con">该公司的老朋友了，来了很多次，这个公司的氛围还不错，值得借鉴。</p>


      <!-- 图片展示区域 -->


      <p class="picshow">


        <img


          @click="previewImages(index)"


          v-for="(image, index) in imageUrls"


          :src="image"


          :key="index"


          alt="Image"


          :class="{active: imageUrls.length === 4}"


        />


      </p>


      <!-- 评论区域 -->


      <div class="tocomments">


        <p>


          <img src="images/Anonymouscomments.png" />


          <span>匿名评论</span>


          <img src="images/Anonymouscomments.png" />


          <span>评论</span>


        </p>


      </div>


      <!-- 评论区域 -->


      <div class="comment">


        <p>


          <span class="name">匿名用户:</span>


          <span class="comin">不错不错。</span>


        </p>


        <p>


          <span class="name">匿名用户:</span>


          <span class="comin">可以的，确实可以哦</span>


        </p>


      </div>


    </div>


    <p class="con">该公司的老朋友了，来了很多次，这个公司的氛围还不错，值得借鉴。</p>


    <p class="picshow">


      <img


        @click="previewImages(index)"


        v-for="(image, index) in imageUrls"


        :src="image"


        :key="index"


        alt="Image"


      />


    </p>


    <img src="images/Addmessage.png" class="Addmessage" @click="Addmessage()" />


  </div>


</template>


  


@@ -30,9 +56,11 @@


export default {


  data() {


    return {


      inputValue: "",


      imageUrls: [


        "https://img1.baidu.com/it/u=4049022245,514596079&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1702054800&t=f78ab44b6c79d50010356b808487b695",


        "https://img0.baidu.com/it/u=3368678403,249914024&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1702054800&t=46a3ab3b84070007415537fac57564cc",


        "https://img0.baidu.com/it/u=530426417,2082848644&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1702054800&t=f990cc80430f0fdee1e2792888109cac",


        "https://img0.baidu.com/it/u=530426417,2082848644&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1702054800&t=f990cc80430f0fdee1e2792888109cac"


      ]


    };


@@ -41,20 +69,35 @@


  computed: {},


  created() {},


  methods: {


    // 图片预览


    previewImages(index) {


      images:this.imageUrls


      // startPosition: 1,


      ImagePreview([


        "https://img1.baidu.com/it/u=4049022245,514596079&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1702054800&t=f78ab44b6c79d50010356b808487b695"


      ]);


      ImagePreview({


        images: this.imageUrls,


        startPosition: index


      });


    },


    // 添加留言


    Addmessage() {


      this.$router.push({


        path: "/Addmessage"


      });


    }


  }


};


</script>


  


<style scoped lang="scss">


.Addmessage {


  position: absolute;


  right: 10px;


  bottom: 130px;


  width: 70px;


  height: 70px;


}




.message {


  padding: 20px;


  position: relative;


  .info {


    display: flex;


    align-items: center;


@@ -86,9 +129,41 @@


  .picshow {


    img {


      width: 30%;


      height: 100px;


      aspect-ratio: 1 / 1;


      margin: 5px;


    }


    .active {


      width: 35%;


    }


  }


  .tocomments {


    display: flex;


    margin: 10px 0px;


    p {


      margin-left: auto;


      display: flex;


      justify-content: center;


      align-items: center;


    }


    img {


      width: 20px;


      height: 20px;


      margin: 5px;


    }


    span {


      font-size: 16px;


    }


  }


  .comment {


    background: #f4f5f7;


    padding: 10px;


    font-size: 16px;


    p {


      margin: 3px 0px;


    }


    .name {


      color: #4a80ea;


    }


  }


}


</style>




 src/views/toexamine/index.vue


New file


@@ -0,0 +1,143 @@


<!--去评分-->


<template>


  <div class="toexamine">


    <div class="headsculpture">


      <img


        src="https://img1.baidu.com/it/u=2465052889,887279449&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"


      />


      <p>{{this.poepleinfo.name}}</p>


    </div>


    <div class="Info">


      <div>


        <p>部门</p>


        <p>技术部</p>


      </div>


      <div>


        <p>职务</p>


        <p>总经理</p>


      </div>


      <div>


        <p>人员类型</p>


        <p>经营</p>


      </div>


      <div>


        <p>合伙类型</p>


        <p>重要合伙人</p>


      </div>


    </div>


    <p class="illustrate">说明：对当前评分，权重占40%，评分范围（100分制）±30</p>


    <p class="title">评分</p>


    <van-field


      v-model="score"


      placeholder="请输入评分"


      readonly


      clickable


      @touchstart.stop="show = true"


    />


    <van-number-keyboard v-model="score" :show="show" :maxlength="6" @blur="show = false" />


    <p class="title">评分说明</p>


    <van-field v-model="instructions" rows="3" type="textarea" placeholder="请描述" />


    <van-button type="primary" block @click="submit()">提交</van-button>


  </div>


</template>


        


  <script>


export default {


  data() {


    return {


      poepleinfo: {


        name: this.$route.query.name


      },


      score: null,


      show: false,


      instructions: ""


    };


  },




  computed: {},


  mounted() {


    console.log(this.$route.query.name);


  },


  created() {},


  methods: {


    submit() {


      if (parseFloat(this.score) > 130) {


        this.$toast.fail("评分值错误");


      } else {


        this.$router.push({


          path: "/"


        });


      }


    }


  }


};


</script>


        


  <style scoped lang="scss">


.red {


  color: red;


  font-size: 14px;


}


.toexamine {


  width: 100%;


  padding: 20px;


  .headsculpture {


    width: 100%;


    display: flex;


    flex-direction: column;


    align-items: center;


    img {


      width: 100px;


      height: 100px;


      border-radius: 100px;


      margin: 10px 0px 10px 0px;


    }


    p {


      font-size: 20px;


      font-weight: bold;


      margin-bottom: 20px;


    }


  }


  .Info {


    display: flex;


    div {


      flex: 1;


      display: flex;


      flex-direction: column;


      align-items: center;


      p {


        line-height: 30px;


      }


      p:nth-child(1) {


        font-size: 14px;


        color: #666666;


      }


      p:nth-child(2) {


        font-size: 18px;


        text-align: center;


      }


    }


  }


  .illustrate {


    color: #999999;


    font-size: 14px;


    margin: 10px 0px;


  }


  .title {


    text-align: center;


    font-size: 20px;


    font-weight: bold;


    margin: 20px;


  }


  .van-field {


    border: 1px solid #dee1e7;


    border-radius: 5px;


    font-size: 18px;


  }


  .van-button {


    margin-top: 30px;


    background: linear-gradient(163deg, #01bdfc 0%, #017bfc 100%);


  }


}


</style>