Home Explore Help
Register Sign In
bingxue
/
answer
Watch 2
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

feat style

xtz 4 years ago
parent
890497234b
commit
502a06277d
31 changed files with 603 additions and 13 deletions
Unified View Show Diff Stats
  1. 2 2
      answer/.env.development
  2. BIN
      answer/public/img/bar-chart-grouped-line.png
  3. BIN
      answer/public/img/company-active.png
  4. BIN
      answer/public/img/company.png
  5. BIN
      answer/public/img/contest/bg.png
  6. BIN
      answer/public/img/contest/confirm-bg.png
  7. BIN
      answer/public/img/contest/success.png
  8. BIN
      answer/public/img/home-active.png
  9. BIN
      answer/public/img/home.png
  10. BIN
      answer/public/img/info/arrow.png
  11. BIN
      answer/public/img/info/bg.png
  12. BIN
      answer/public/img/info/button-bg.png
  13. BIN
      answer/public/img/info/list-bg.png
  14. BIN
      answer/public/img/info/warning.png
  15. BIN
      answer/public/img/line-chart-line.png
  16. BIN
      answer/public/img/logo.png
  17. BIN
      answer/public/img/logo1.png
  18. BIN
      answer/public/img/logo2.png
  19. BIN
      answer/public/img/logo3.png
  20. BIN
      answer/public/img/logo4.png
  21. BIN
      answer/public/img/people-active.png
  22. BIN
      answer/public/img/people.png
  23. BIN
      answer/public/img/pie-chart-line.png
  24. BIN
      answer/public/img/setting-active.png
  25. BIN
      answer/public/img/setting.png
  26. 6 0
      answer/public/index.html
  27. 11 11
      answer/src/common/api/axios.js
  28. 3 0
      answer/src/main.js
  29. 10 0
      answer/src/router/index.js
  30. 371 0
      answer/src/views/contest.vue
  31. 200 0
      answer/src/views/info.vue

+ 2 - 2
answer/.env.development
View File 

@@ -1,8 +1,8 @@
 
 // 本地环境
 
 // 本地环境
 
 module.exports={
 
 module.exports={
 
   NODE_ENV = development
 
   NODE_ENV = development
 
-  VUE_APP_API = https://api.yc1min.com
 
-  VUE_APP_IMG = https://cdn.yc1min.com
 
+  VUE_APP_API = http://118.24.176.28:8778
 
+  VUE_APP_IMG = http://118.24.176.28:8778
 
   VUE_APP_VER = 0.0.1
 
   VUE_APP_VER = 0.0.1
 
   VUE_APP_DAT = new Date().getTime()
 
   VUE_APP_DAT = new Date().getTime()
 
   VUE_APP_DOMAIN = 127.0.0.1
 
   VUE_APP_DOMAIN = 127.0.0.1

BIN
answer/public/img/bar-chart-grouped-line.png
View File


BIN
answer/public/img/company-active.png
View File


BIN
answer/public/img/company.png
View File


BIN
answer/public/img/contest/bg.png
View File


BIN
answer/public/img/contest/confirm-bg.png
View File


BIN
answer/public/img/contest/success.png
View File


BIN
answer/public/img/home-active.png
View File


BIN
answer/public/img/home.png
View File


BIN
answer/public/img/info/arrow.png
View File


BIN
answer/public/img/info/bg.png
View File


BIN
answer/public/img/info/button-bg.png
View File


BIN
answer/public/img/info/list-bg.png
View File


BIN
answer/public/img/info/warning.png
View File


BIN
answer/public/img/line-chart-line.png
View File


BIN
answer/public/img/logo.png
View File


BIN
answer/public/img/logo1.png
View File


BIN
answer/public/img/logo2.png
View File


BIN
answer/public/img/logo3.png
View File


BIN
answer/public/img/logo4.png
View File


BIN
answer/public/img/people-active.png
View File


BIN
answer/public/img/people.png
View File


BIN
answer/public/img/pie-chart-line.png
View File


BIN
answer/public/img/setting-active.png
View File


BIN
answer/public/img/setting.png
View File


+ 6 - 0
answer/public/index.html
View File 

@@ -17,6 +17,12 @@
 
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,600,700,900">
 
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,600,700,900">
 
     <script src = "https://cdn.jsdelivr.net/npm/proxy-polyfill@0.3.0/proxy.min.js"></script>
 
     <script src = "https://cdn.jsdelivr.net/npm/proxy-polyfill@0.3.0/proxy.min.js"></script>
 
     <title>知识竞赛</title>
 
     <title>知识竞赛</title>
 
+    <style>
 
+      *{
 
+        margin: 0;
 
+        padding: 0;
 
+      }
 
+    </style>
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
     <noscript>
 
     <noscript>

+ 11 - 11
answer/src/common/api/axios.js
View File 

@@ -6,7 +6,7 @@
 
  * @FilePath     : \batterycloud-admin\src\common\api\axios.js
 
  * @FilePath     : \batterycloud-admin\src\common\api\axios.js
 
  */
 
  */
 
 import axios from 'axios'
 
 import axios from 'axios'
 
-import vue from '../../main'
 
+// import vue from '../../main'
 
 import { Message, Loading } from 'element-ui'
 
 import { Message, Loading } from 'element-ui'
 
 // import { all } from 'core-js/fn/promise'
 
 // import { all } from 'core-js/fn/promise'
 
 let api = ''
 
 let api = ''
 
@@ -18,7 +18,7 @@ const allowList = [ // 文件请求路径数组
 
 const fileUpload = ['/upload/uploadImg']
 
 const fileUpload = ['/upload/uploadImg']
 
 
 
 const service = axios.create({
 
 const service = axios.create({
 
-  baseURL: process.env.VUE_APP_API + '/admin',
 
+  baseURL: process.env.VUE_APP_API,
 
   // baseURL: 'http://47.100.59.52:7785',
 
   // baseURL: 'http://47.100.59.52:7785',
 
   timeout: 90000
 
   timeout: 90000
 
 })
 
 })
 
@@ -96,15 +96,15 @@ service.interceptors.response.use(
 
         loading.close()
 
         loading.close()
 
         return
 
         return
 
       }
 
       }
 
-      if (res.data.state === 206) {
 
-        localStorage.clear()
 
-        // sessionStorage.claer()
 
-        vue.$cookies.removeCookies()
 
-        loading.close()
 
-        setTimeout(() => {
 
-          location.reload()
 
-        }, 100)
 
-      }
 
+      // if (res.data.state === 206) {
 
+      //   localStorage.clear()
 
+      //   // sessionStorage.claer()
 
+      //   vue.$cookies.removeCookies()
 
+      //   loading.close()
 
+      //   setTimeout(() => {
 
+      //     location.reload()
 
+      //   }, 100)
 
+      // }
 
       if (fileUpload.indexOf(api) !== -1) {
 
       if (fileUpload.indexOf(api) !== -1) {
 
         loading.close()
 
         loading.close()
 
         resolve(res.data)
 
         resolve(res.data)

+ 3 - 0
answer/src/main.js
View File 

@@ -12,6 +12,7 @@ import router from './router'
 
 import api from './common/api/api'
 
 import api from './common/api/api'
 
 import utils from './common/utils/utils'
 
 import utils from './common/utils/utils'
 
 import Cookies from 'js-cookie'
 
 import Cookies from 'js-cookie'
 
+import elementUi from 'element-ui'
 
 
 
 import VueCropper from 'vue-cropper'
 
 import VueCropper from 'vue-cropper'
 
 
 
@@ -19,11 +20,13 @@ import cookiesDeploy from './common/utils/cookiesDeploy'
 
 
 
 import './common/font/iconfont.css'
 
 import './common/font/iconfont.css'
 
 // import './permission.js'
 
 // import './permission.js'
 
+import 'element-ui/lib/theme-chalk/index.css'
 
 
 
 import 'babel-polyfill'
 
 import 'babel-polyfill'
 
 
 
 Vue.use(VueCropper)
 
 Vue.use(VueCropper)
 
 Vue.use(Cookies)
 
 Vue.use(Cookies)
 
+Vue.use(elementUi)
 
 
 
 Vue.prototype.Cookies = Cookies
 
 Vue.prototype.Cookies = Cookies
 
 Vue.prototype.$cookies = cookiesDeploy
 
 Vue.prototype.$cookies = cookiesDeploy

+ 10 - 0
answer/src/router/index.js
View File 

@@ -12,6 +12,16 @@ Vue.use(VueRouter)
 
 // let list
 
 // let list
 
 
 
 const routes = [
 
 const routes = [
 
+  {
 
+    path: '/info',
 
+    name: 'info',
 
+    component: () => import('@/views/info.vue')
 
+  },
 
+  {
 
+    path: '/contest',
 
+    name: 'contest',
 
+    component: () => import('@/views/contest.vue')
 
+  },
 
   // error
 
   // error
 
   {
 
   {
 
     path: '*',
 
     path: '*',

+ 371 - 0
answer/src/views/contest.vue
View File 

@@ -0,0 +1,371 @@
 
+<template>
 
+<div>
 
+    <img class="bg" :src="bg" alt="">
 
+    <div class="top" v-if="!submitState">
 
+        <div class="top-message">
 
+            您还有
 
+            <div class="time">09:44</div>
 
+            秒答题！
 
+        </div>
 
+        <div class="nav-list">
 
+            <div :class="page===item?'active':''" v-for="item in 5" :key="item" @click="page=item">{{`第${(item-1)*10+1}-${item*10}题`}}</div>
 
+        </div>
 
+    </div>
 
+    <div class="f">
 
+        <div class="content">
 
+            <div class="title" v-if="!submitState">2022年冬奥会知识竞赛</div>
 
+            <div class="answer">
 
+                <div class="answer-item" v-for="(item,index) in answerList" :key="item.id">
 
+                    <div class="answer-item-title">
 
+                        <div class="answer-item-icon">{{(page-1)*10+index+1}}</div>
 
+                        <div class="answer-item-text">{{item.topic}}</div>
 
+                    </div>
 
+                    <div class="answer-item-choose">
 
+                        <div :class="chooseList[(page-1)*10+index]===num?'active':''" v-for="(i,num) in item.options" :key="i.optionId" @click="clickChoose((page-1)*10+index,num)">{{['A','B','C','D'][num]}}. {{i.optionContent}}</div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        <div class="button-group" v-if="page===1">
 
+            <div class="first-button" @click="page=2" v-if="!submitState">下一页</div>
 
+        </div>
 
+        <div class="button-group" v-else-if="!submitState">
 
+            <div class="back-button" @click="page-=1">上一页</div>
 
+            <div class="next-button" @click="page+=1" v-if="page!==5">下一页</div>
 
+            <div class="confim-button" @click="submit" v-else>提交</div>
 
+        </div>
 
+        <div class="bounced" :style="conTop" v-if="submitState">
 
+            <img :src="icon" alt="">
 
+            <div class="bounced-message">提交已成功！</div>
 
+            <div class="bounced-button">返回</div>
 
+        </div>
 
+    </div>
 
+</div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  data () {
 
+    return {
 
+      bg: require('../../public/img/contest/bg.png'),
 
+      conTop: {
 
+        backgroundImage: 'url(' + require('../../public/img/contest/confirm-bg.png') + ')',
 
+        backgroundRepeat: 'no-repeat',
 
+        backgroundSize: 'cover'
 
+      },
 
+      icon: require('../../public/img/contest/success.png'),
 
+      page: 1,
 
+      questions: [],
 
+      chooseList: [],
 
+      paperId: null,
 
+      timer: null,
 
+      paperDuration: 0,
 
+      submitState: false
 
+    }
 
+  },
 
+  computed: {
 
+    answerList () {
 
+      let {
 
+        questions,
 
+        page
 
+      } = this.$data
 
+      return questions.filter((itx, num) => num >= (page - 1) * 10 && num < page * 10)
 
+    }
 
+  },
 
+  watch: {
 
+    page () {
 
+      document.body.scrollIntoView()
 
+    }
 
+  },
 
+  methods: {
 
+    getAttendContest () {
 
+      this.$api.post('/mCompetition/attendContest', {
 
+        userId: 7
 
+      }).then(r => {
 
+        this.questions = r.object.questions
 
+        this.paperId = r.object.paperId
 
+      })
 
+    },
 
+    // 问题下标 选择答案下标
 
+    clickChoose (q, a) {
 
+      this.$set(this.chooseList, q, a)
 
+    },
 
+    submit () {
 
+      let paperScore = 0
 
+      let questionWrong = []
 
+      let {
 
+        paperDuration,
 
+        paperId,
 
+        questions,
 
+        chooseList
 
+      } = this.$data
 
+      questions.forEach((item, index) => {
 
+        (chooseList[index] || chooseList[index] === 0) && item.options[chooseList[index]].optionAnswer
 
+          ? paperScore += 2
 
+          : questionWrong.push({
 
+            [item.id]: (chooseList[index] || chooseList[index] === 0) ? item.options[chooseList[index]].optionId : ''
 
+          })
 
+      })
 
+      this.$api.post('/mCompetition/submitUserAnswer', {
 
+        reqdata: {
 
+          paperId,
 
+          paperDuration,
 
+          paperScore,
 
+          questionWrong: JSON.stringify(questionWrong),
 
+          userId: 7
 
+        },
 
+        userId: 7
 
+      }).then(r => {
 
+        this.submitState = true
 
+        clearInterval(this.timer)
 
+        this.questions = []
 
+        this.chooseList = []
 
+      })
 
+    }
 
+  },
 
+  mounted () {
 
+    this.getAttendContest()
 
+  },
 
+  created () {
 
+    this.timer = setInterval(() => {
 
+      this.paperDuration += 1
 
+      console.log(this.paperDuration)
 
+    }, 1000)
 
+  },
 
+  beforeDestroy () {
 
+    this.timer && clearInterval(this.timer)
 
+  }
 
+}
 
+</script>
 
+
 
+<style lang="scss" scoped>
 
+.bg {
 
+    margin: 0;
 
+    padding: 0;
 
+    float: left;
 
+    position: absolute;
 
+    z-index: 0;
 
+    left: 50%;
 
+    transform: translateX(-50%);
 
+}
 
+
 
+.top {
 
+    font-size: 24px;
 
+    font-weight: 400;
 
+    color: #FFFFFF;
 
+    position: relative;
 
+    z-index: 9;
 
+
 
+    &-message {
 
+        padding-top: 175px;
 
+        display: flex;
 
+        font-size: 24px;
 
+        font-weight: 400;
 
+        color: #FFFFFF;
 
+        justify-content: center;
 
+        align-items: center;
 
+
 
+        .time {
 
+            width: 136px;
 
+            height: 39px;
 
+            background: #495AFC;
 
+            margin: 0 5px;
 
+            border-radius: 5px;
 
+            font-size: 36px;
 
+            line-height: 39px;
 
+            text-align: center;
 
+            font-weight: 500;
 
+            color: #FFFFFF;
 
+        }
 
+    }
 
+
 
+    .nav-list {
 
+        display: flex;
 
+        justify-content: center;
 
+        margin-top: 40px;
 
+        font-size: 16px;
 
+        font-weight: 400;
 
+        color: #FFFFFF;
 
+
 
+        &>div {
 
+            width: 85px;
 
+            height: 30px;
 
+            line-height: 30px;
 
+            margin: 0 15px;
 
+            text-align: center;
 
+        }
 
+
 
+        .active {
 
+            background-color: #ffffff;
 
+            border-radius: 30px;
 
+            font-size: 16px;
 
+            font-weight: 500;
 
+            color: #59598D;
 
+        }
 
+    }
 
+}
 
+
 
+.f {
 
+    position: absolute;
 
+    z-index: 9;
 
+    left: 50%;
 
+    transform: translateX(-50%);
 
+    top: 306px;
 
+}
 
+
 
+.content {
 
+    width: 905px;
 
+    min-height: 579px;
 
+    background: #FFFFFF;
 
+    box-shadow: 0px 2px 15px 0px rgba(228, 231, 246, 0.5);
 
+    border-radius: 38px;
 
+    padding-bottom: 27px;
 
+
 
+    .title {
 
+        font-size: 24px;
 
+        font-weight: 500;
 
+        color: #59598D;
 
+        text-align: center;
 
+        padding-top: 50px;
 
+    }
 
+
 
+    .answer {
 
+        padding-top: 42px;
 
+        display: flex;
 
+        align-items: center;
 
+        flex-direction: column;
 
+
 
+        &-item {
 
+            width: 450px;
 
+            margin-bottom: 25px;
 
+
 
+            &-title {
 
+                display: flex;
 
+                align-items: center;
 
+            }
 
+
 
+            &-icon {
 
+                width: 20px;
 
+                height: 20px;
 
+                border-radius: 20px;
 
+                background-image: linear-gradient(#FF7A09, #F4B65A);
 
+                margin-right: 13px;
 
+                font-weight: 600;
 
+                color: #FFFFFF;
 
+                text-align: center;
 
+                font-size: 14px;
 
+            }
 
+
 
+            &-text {
 
+                width: 350px;
 
+                font-size: 14px;
 
+                font-weight: 500;
 
+                color: #59598D;
 
+            }
 
+
 
+            &-choose {
 
+                >div {
 
+                    width: 336px;
 
+                    min-height: 34px;
 
+                    background: #FFFFFF;
 
+                    border-radius: 17px;
 
+                    border: 1px solid #EFEFFF;
 
+                    font-size: 14px;
 
+                    font-weight: 400;
 
+                    padding: 8px 0 9px 20px;
 
+                    margin: 10px 0 0 20px;
 
+                    box-sizing: border-box;
 
+                    color: #59598D;
 
+                }
 
+
 
+                .active {
 
+                    color: #FFFFFF;
 
+                    background: #5679F0;
 
+                }
 
+            }
 
+        }
 
+    }
 
+}
 
+
 
+.button-group {
 
+    display: flex;
 
+    justify-content: center;
 
+    margin: 20px 0 30px 0;
 
+}
 
+
 
+.first-button {
 
+    background-image: linear-gradient(to right, #57A8EF, #6247FF);
 
+    width: 330px;
 
+    height: 65px;
 
+    border-radius: 60px;
 
+    font-size: 18px;
 
+    font-weight: 600;
 
+    color: #FFFFFF;
 
+    line-height: 65px;
 
+    text-align: center;
 
+}
 
+
 
+.back-button,
 
+.next-button {
 
+    width: 142px;
 
+    height: 58px;
 
+    text-align: center;
 
+    border-radius: 29px;
 
+    font-size: 18px;
 
+    font-weight: 500;
 
+    line-height: 58px;
 
+    color: #59598D;
 
+    border: 1px solid #C7CCF9;
 
+    margin: 0 5px;
 
+}
 
+
 
+.confim-button {
 
+    width: 142px;
 
+    height: 58px;
 
+    background-image: linear-gradient(to right, #57A8EF, #6247FF);
 
+    border-radius: 29px;
 
+    font-size: 18px;
 
+    line-height: 58px;
 
+    font-weight: 600;
 
+    color: #FFFFFF;
 
+    text-align: center;
 
+    margin-left: 5px;
 
+}
 
+
 
+.bounced {
 
+    width: 300px;
 
+    height: 300px;
 
+    position: absolute;
 
+    top: 50%;
 
+    left: 50%;
 
+    transform: translate(-50%, -50%);
 
+    display: flex;
 
+    flex-direction: column;
 
+    align-items: center;
 
+
 
+    >img {
 
+        padding: 48px 0 24px 0;
 
+        width: 50px;
 
+        height: 50px;
 
+    }
 
+
 
+    &-message {
 
+        margin-bottom: 28px;
 
+        font-size: 18px;
 
+        font-weight: 500;
 
+        color: #161616;
 
+    }
 
+
 
+    &-button {
 
+        width: 142px;
 
+        height: 48px;
 
+        border-radius: 25px;
 
+        border: 1px solid #C7CCF9;
 
+        line-height: 48px;
 
+        font-size: 16px;
 
+        font-weight: 600;
 
+        color: #59598D;
 
+        text-align: center;
 
+    }
 
+}
 
+</style>

+ 200 - 0
answer/src/views/info.vue
View File 

@@ -0,0 +1,200 @@
 
+<template>
 
+<div>
 
+    <img :src="bg" class="bg" alt="">
 
+    <div class="content">
 
+        <div class="form-list">
 
+            <div class="form-item">
 
+                <div class="item-label">姓名</div>
 
+                <el-input v-model="form.actualName" class="item-right" placeholder="请输入"></el-input>
 
+            </div>
 
+            <div class="form-item">
 
+                <div class="item-label">性别</div>
 
+                <el-select v-model="form.sex" placeholder="请选择">
 
+                    <el-option v-for="item in sexList" :key="item.value" :label="item.label" :value="item.value">
 
+                    </el-option>
 
+                </el-select>
 
+            </div>
 
+            <div class="form-item">
 
+                <div class="item-label">年龄</div>
 
+                <el-input v-model="form.age" class="item-right" placeholder="请输入"></el-input>
 
+            </div>
 
+            <div class="form-item">
 
+                <div class="item-label">区域</div>
 
+                <el-select v-model="form.area" placeholder="请选择">
 
+                    <el-option v-for="item in areaList" :key="item.value" :label="item.label" :value="item.value">
 
+                    </el-option>
 
+                </el-select>
 
+            </div>
 
+            <div class="form-item">
 
+                <div class="item-label">学校</div>
 
+                <el-select v-model="form.school" filterable :filter-method="filterMethod" placeholder="请选择">
 
+                    <el-option v-for="item in schoolList" :key="item.value" :label="item.label" :value="item.value">
 
+                    </el-option>
 
+                </el-select>
 
+            </div>
 
+
 
+            <div class="warning">
 
+                <img :src="warning" alt="">
 
+                <div class="warning-text">请填写学校完整名称</div>
 
+            </div>
 
+
 
+            <div class="form-item">
 
+                <div class="item-label">年级</div>
 
+                <el-input v-model="form.grade" class="item-right" placeholder="请输入"></el-input>
 
+            </div>
 
+            <div class="form-item">
 
+                <div class="item-label">其他</div>
 
+                <el-input v-model="form.other" class="item-right" placeholder="请输入"></el-input>
 
+            </div>
 
+        </div>
 
+        <div class="confim-button">Start Now !</div>
 
+    </div>
 
+</div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  data () {
 
+    return {
 
+      bg: require('../../public/img/info/bg.png'),
 
+      warning: require('../../public/img/info/warning.png'),
 
+      form: {},
 
+      sexList: [{
 
+        label: '男',
 
+        vaule: 1
 
+      }, {
 
+        label: '女',
 
+        value: 2
 
+      }],
 
+      schoolList: [],
 
+      schoolData: [],
 
+      areaList: []
 
+    }
 
+  },
 
+  methods: {
 
+    getareaList () {
 
+      this.$api.post('/user/queryAllArea', {}).then(r => {
 
+        this.areaList = r.list.map(item => ({
 
+          label: item.areaName,
 
+          value: item.id
 
+        }))
 
+      })
 
+    },
 
+    getSchoolList (val) {
 
+      this.$api.post('/user/querySchoolByAreaId', {
 
+        reqdata: {
 
+          id: val
 
+        }
 
+      }).then(r => {
 
+        this.schoolData = r.list.map(item => ({
 
+          label: item.schoolName,
 
+          value: item.id
 
+        }))
 
+        this.schoolList = this.schoolData
 
+      })
 
+    },
 
+    filterMethod (val) {
 
+      this.schoolList = this.schoolData.filter(item => item.label.includes(val))
 
+    }
 
+  },
 
+  mounted () {
 
+    this.getareaList()
 
+  },
 
+  watch: {
 
+    'form.area' (val) {
 
+      this.getSchoolList(val)
 
+    }
 
+  }
 
+}
 
+</script>
 
+
 
+<style lang="scss">
 
+.el-input__inner {
 
+    border: none;
 
+    width: 340px !important;
 
+}
 
+
 
+.el-input {
 
+    width: 340px !important;
 
+}
 
+</style><style lang="scss" scoped>
 
+.bg {
 
+    // width: 100%;
 
+    margin: 0;
 
+    padding: 0;
 
+    float: left;
 
+    position: absolute;
 
+    z-index: 0;
 
+    left: 50%;
 
+    transform: translateX(-50%);
 
+}
 
+
 
+.content {
 
+    position: relative;
 
+    z-index: 9;
 
+    display: flex;
 
+    // justify-content: center;
 
+    align-items: center;
 
+    flex-direction: column;
 
+    padding-bottom: 20px;
 
+
 
+    .form-list {
 
+        padding-top: 400px;
 
+        margin-bottom: 90px;
 
+
 
+        .warning {
 
+            width: 440px;
 
+            display: flex;
 
+            margin-left: 24px;
 
+            margin-bottom: 20px;
 
+
 
+            image {
 
+                width: 18px;
 
+                height: 18px;
 
+            }
 
+
 
+            &-text {
 
+                margin-left: 12px;
 
+                font-weight: 400;
 
+                color: #59598D;
 
+                font-size: 14px;
 
+            }
 
+        }
 
+
 
+        .form-item {
 
+            width: 471px;
 
+            height: 53px;
 
+            background: #FFFFFF;
 
+            box-shadow: 0px 2px 15px 0px rgba(228, 231, 246, 0.5);
 
+            border-radius: 100px;
 
+            display: flex;
 
+            align-items: center;
 
+            margin-bottom: 20px;
 
+
 
+            .item-label {
 
+
 
+                height: 16px;
 
+                width: 80px;
 
+                font-size: 16px;
 
+                font-weight: 400;
 
+                color: #161616;
 
+                line-height: 16px;
 
+                padding: 0 0 0 25px;
 
+                box-sizing: border-box;
 
+                border-right: 1px solid #D8D8D8;
 
+            }
 
+        }
 
+    }
 
+
 
+    .confim-button {
 
+        background-image: linear-gradient(to right, #6247FF, #57A8EF);
 
+        width: 330px;
 
+        height: 65px;
 
+        border-radius: 60px;
 
+        color: #FFFFFF;
 
+        line-height: 65px;
 
+        font-size: 24px;
 
+        text-align: center;
 
+    }
 
+}
 
+</style>