From 2437e07e758eeef362edd7bf094395d55798d982 Mon Sep 17 00:00:00 2001 From: heyujie <516346543@qq.com> Date: 星期二, 01 三月 2022 20:01:18 +0800 Subject: [PATCH] destop弹窗ui改动 --- src/pages/desktop/index/components/Desktop.vue | 340 +++++++++++++++++++++++++++++++++++++++---------------- 1 files changed, 239 insertions(+), 101 deletions(-) diff --git a/src/pages/desktop/index/components/Desktop.vue b/src/pages/desktop/index/components/Desktop.vue index a343368..a77c052 100644 --- a/src/pages/desktop/index/components/Desktop.vue +++ b/src/pages/desktop/index/components/Desktop.vue @@ -12,12 +12,15 @@ <div class="warn-tag" v-if="showFreeVersion"> <span v-if="!snExpire" class="text" - >璇曠敤鐗堝皻鏈縺娲伙紝浠呮敮鎸侀儴鍒嗗姛鑳戒娇鐢紝濡傞渶浣跨敤鍏ㄩ儴鍔熻兘锛岃灏藉揩婵�娲荤郴缁熴��</span + >璇曠敤鐗堝皻鏈縺娲伙紝浠呮敮鎸佷娇鐢ㄩ儴鍒嗗姛鑳斤紝濡傞渶浣跨敤鍏ㄩ儴鍔熻兘锛岃灏藉揩婵�娲汇��</span > <span v-else class="text">SmartAIOS 璇曠敤鏈熷凡鍒版湡锛岃鎮ㄥ敖蹇縺娲荤郴缁�</span> <div> <span class="go-to" @click="gotoActive">鍓嶅線婵�娲�</span> - <span class="icon iconfont" @click="showFreeVersion = false" + <span + class="icon iconfont" + v-if="!snExpire" + @click="showFreeVersion = false" ></span > </div> @@ -26,7 +29,8 @@ <el-dialog title="婵�娲籗martAI" :visible.sync="activeDialog" - width="750px" + width="640px" + custom-class="my-activate" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" @@ -34,12 +38,15 @@ <el-dialog width="30%" title="璐︽埛婵�娲�" + custom-class="my-account" :visible.sync="innerVisible" append-to-body class="inner-login-dialog" > <div class="info"> - 璇疯緭鍏ヤ綘鍦⊿martAI鍟嗗煄璐︽埛鐨勬墜鏈哄彿骞跺畬鎴愰獙璇佺爜鏍¢獙锛屽疄鐜扮郴缁熸縺娲伙紒 + <span style="font-size: 14px; line-height: 21px; color: #5f5f5f"> + 璇疯緭鍏ヤ綘鍦⊿martAI鍟嗗煄璐︽埛鐨勬墜鏈哄彿骞跺畬鎴愰獙璇佺爜鏍¢獙锛屽疄鐜扮郴缁熸縺娲伙紒 + </span> </div> <div class="login-content"> <el-form @@ -51,11 +58,7 @@ class="demo-ruleForm" > <el-form-item prop="phoneNum" style="margin-top: 20px"> - <el-input - v-model="phone.phoneNum" - style="width: 380px" - placeholder="璇疯緭鍏ユ墜鏈哄彿" - > + <el-input v-model="phone.phoneNum" placeholder="璇疯緭鍏ユ墜鏈哄彿"> <i slot="prefix" class="el-icon-mobile-phone"></i> </el-input> </el-form-item> @@ -64,24 +67,28 @@ @keyup.enter.native="phoneLogin" v-model="phone.verifyCode" autocomplete="off" - style="width: 254px" placeholder="璇疯緭鍏ラ獙璇佺爜" > <i slot="prefix" class="el-icon-message"></i> + <el-button + class="code-btn" + slot="suffix" + style="margin-left: 15px" + :disabled="codeDisabled" + @click="getCode" + >{{ codeMsg }}</el-button + > </el-input> - <el-button - class="code-btn" - style="margin-left: 15px" - :disabled="codeDisabled" - @click="getCode" - >{{ codeMsg }}</el-button - > </el-form-item> </el-form> </div> <span slot="footer" class="dialog-footer"> - <el-button @click="cancelLogin">鍙栨秷</el-button> - <el-button type="primary" @click="loginShop">纭畾</el-button> + <div class="btns"> + <el-button class="cancel" @click="cancelLogin">鍙栨秷</el-button> + <el-button class="ok" type="primary" @click="loginShop" + >纭畾</el-button + > + </div> </span> </el-dialog> <div class="ver"> @@ -92,35 +99,46 @@ </div> <el-divider></el-divider> <div class="info" v-if="versionName == 'SmartAI姝e紡鐗�'"> - 濡傛灉鎮ㄥ凡杩炴帴鍒癐nternet骞朵笖宸茶喘涔颁骇鍝佸瘑閽ワ紝鍙互灏濊瘯楠岃瘉SmartAI鍟嗗煄璐︽埛婵�娲荤郴缁熴�� - <div class="margin-top:10px;"> + <span style="font-weight: bold; font-size: 18px">路 </span> + <span style="font-size: 14px; line-height: 21px; color: #5f5f5f"> + 濡傛灉鎮ㄥ凡杩炴帴鍒癐nternet骞朵笖宸茶喘涔颁骇鍝佸瘑閽ワ紝鍙互灏濊瘯楠岃瘉SmartAI鍟嗗煄璐︽埛婵�娲荤郴缁熴�� + </span> + <div style="padding: 15px 0"> <el-button type="primary" @click="innerVisible = true"> 璐︽埛婵�娲� </el-button> </div> </div> <div class="info" v-if="versionName == 'SmartAI姝e紡鐗�'"> - 濡傛灉鎮ㄦ湭杩炴帴Internet鎴栨縺娲诲け璐ワ紝鍙皾璇曠绾挎縺娲伙紝浣跨敤鎵嬫満鎵爜璐拱浜у搧鎴栭獙璇丼martAI鍟嗗煄璐︽埛婵�娲荤郴缁熴�� + <span style="font-weight: bold; font-size: 18px">路 </span> + <span style="font-size: 14px; line-height: 21px; color: #5f5f5f"> + 濡傛灉鎮ㄦ湭杩炴帴Internet鎴栨縺娲诲け璐ワ紝鍙皾璇曠绾挎縺娲伙紝璇风敤鎵嬫満鎵爜璐拱浜у搧鎴栭獙璇丼martAI鍟嗗煄璐︽埛婵�娲荤郴缁熴�� + </span> </div> <div class="info" v-if="versionName !== 'SmartAI姝e紡鐗�'"> - 濡傛灉杩樻病鏈変骇鍝佸瘑閽ワ紝浣犲彲浠ヤ娇鐢ㄦ墜鏈烘壂鐮佹垨鍓嶅線姝ら摼鎺� - <a href="http://apps.smartai.com" target="_blank" - >http://apps.smartai.com</a - > - 璐拱銆� + <span style="font-weight: bold; font-size: 18px">路 </span> + <span style="font-size: 14px; line-height: 21px; color: #5f5f5f"> + 濡傛灉杩樻病鏈変骇鍝佸瘑閽ワ紝浣犲彲浠ヤ娇鐢ㄦ墜鏈烘壂鐮佹垨鍓嶅線姝ら摼鎺� + <a href="http://apps.smartai.com" target="_blank" + >http://apps.smartai.com</a + > + 璐拱銆� + </span> </div> <img class="qr-code-img" src="/version/offline/qrcode" /> - <el-divider></el-divider> <div class="ask"> - 濡傛灉浣犲叿鏈塖martAI鎻愪緵鐨勪骇鍝佸瘑閽ワ紝璇峰湪姝ゅ杈撳叆婵�娲籗martAI銆� + <span style="font-weight: bold; font-size: 18px">路 </span> + <span style="font-size: 14px; line-height: 21px; color: #5f5f5f"> + 濡傛灉鎮ㄦ湁SmartAI鎻愪緵鐨勪骇鍝佸瘑閽ワ紝璇峰湪姝ゅ杈撳叆锛屾縺娲籗martAI銆� + </span> </div> <div class="validate"> <form id="myForm"> <el-input type="textarea" autosize - style="width: 480px" - placeholder="灏嗕骇鍝佸瘑閽ョ矘璐村湪姝ゅ" + style="width: 450px" + placeholder="璇疯緭鍏ユ垨瀵煎叆瀵嗛挜" v-model="secrectKey" > </el-input> @@ -133,22 +151,27 @@ :limit="1" :show-file-list="false" > - <el-button size="small" type="primary">瀵煎叆浜у搧瀵嗛挜鏂囦欢</el-button> + <el-button size="small" type="primary">瀵煎叆瀵嗛挜</el-button> </el-upload> </div> + <!-- <el-divider></el-divider> --> <span slot="footer" class="dialog-footer"> - <el-button - v-if="!snExpire && versionName != 'SmartAI姝e紡鐗�'" - @click="activeDialog = false" - >缁х画璇曠敤</el-button - > - <el-button - v-if="snExpire && versionName != 'SmartAI姝e紡鐗�'" - @click="$emit('quit')" - >閫�鍑虹櫥褰�</el-button - > - <el-button type="primary" @click="activateVersion">婵�娲�</el-button> + <!-- v-if="!snExpire && versionName != 'SmartAI姝e紡鐗�'" --> + <div class="btns"> + <el-button class="cancel" @click="activeDialog = false" + >缁х画璇曠敤</el-button + > + <el-button + class="cancel" + v-if="snExpire && versionName != 'SmartAI姝e紡鐗�'" + @click="$emit('quit')" + >閫�鍑虹櫥褰� + </el-button> + <el-button class="ok" type="primary" @click="activateVersion" + >婵�娲�</el-button + > + </div> </span> </el-dialog> @@ -156,7 +179,7 @@ title="鎴戠殑璁㈠崟" :visible.sync="innerDialog" width="750px" - :show-close="false" + :show-close="true" :close-on-click-modal="false" :close-on-press-escape="false" custom-class="my-order" @@ -189,22 +212,6 @@ </div> </div> </div> - <!-- <div class="order-card" v-for="(item, index) in orderList" :key="index"> - <div class="head"> - <el-checkbox v-model="checked"> - <span>璁㈠崟ID锛歿{ item.id }}</span> - </el-checkbox> - - <span>锟{ item.orderMoney }} 鍏�</span> - </div> - <div class="desc"> - <div>绯荤粺鐗堟湰锛歿{ item.products[0]&&item.products[0].productVersion }}</div> - <div>閫氶亾鏁伴噺锛歿{ item.products[0]&&item.products[0].ChCount }}</div> - <div>鎽勫儚鏈烘暟閲忥細{{ item.products[0]&&item.products[0].cameraCount }}</div> - <div>鏈嶅姟鏃堕暱锛歿{ item.products[0]&&item.products[0].serveYear }} 骞�</div> - - </div> - </div> --> </div> <div class="no-order-list" v-else>鎶辨瓑锛屾病鏈夋煡璇㈠埌璁㈠崟銆�</div> <span slot="footer" class="dialog-footer"> @@ -329,13 +336,6 @@ } }, loginShop() { - // this.innerDialog = true - // this.activeDialog=false - // getShopOrderList({ - // token: "", - // }).then((res) => { - // this.orderList=res.data.list - // }); this.$refs["phoneLogin"].validate((valid) => { if (valid) { let param = { @@ -454,13 +454,19 @@ width: 100%; height: 100%; .el-dialog__header { - padding: 15px 20px 10px; - text-align: left; - font-weight: 600; + padding: 14px 20px 13px; + text-align: center; + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08); + .el-dialog__title { + font-weight: 600; + font-size: 18px; + color: #5f5f5f; + line-height: 25px; + } } .el-dialog__body { text-align: left; - padding: 30px 50px; + padding: 30px; padding-top: 20px; } .el-divider--horizontal { @@ -470,11 +476,29 @@ display: flex; align-items: baseline; margin-top: 15px; + .upload-demo { + .el-button--small { + font-size: 14px; + border-radius: 3px; + border-radius: 16px; + background-color: var(--colorCard) !important; + border-color: var(--colorCard) !important; + min-width: 120px; + } + } } #myForm { display: flex; align-items: center; margin-right: 10px; + .el-textarea__inner { + min-height: 32px; + height: 32px; + border: 1px solid #d4d6d9; + box-sizing: border-box; + border-radius: 16px; + } + .single-input { margin: 0 8px; width: 60px; @@ -483,51 +507,165 @@ .ver { margin-bottom: 10px; font-size: 16px; + color: #5f5f5f; + font-weight: bold; .ver-text { - font-weight: 600; + color: #666666; + font-weight: 400; } } .info { - font-size: 15px; margin-bottom: 10px; - } - .qr-code-img { - // width: 120px; - // height: 120px; + .el-button--primary { + font-size: 14px; + color: #fff; + background-color: var(--colorCard); + border-color: #4e94ff !important; + background: #4e94ff !important; + border-radius: 16px; + width: 200px; + display: flex; + align-items: center; + justify-content: center; + height: 32px; + line-height: 32px; + } } .ask { margin-top: 20px; font-size: 15px; } } -.inner-login-dialog { - .info { - padding: 0 30px; + +.el-dialog.my-account { + border-radius: 24px; + .btns { + display: flex; + justify-content: right; + .cancel { + width: 76px; + height: 40px; + cursor: pointer; + border-radius: 20px; + line-height: 40px; + font-size: 14px; + color: var(--colorCard); + border-color: var(--colorCard) !important; + margin-right: 12px; + display: flex; + align-items: center; + justify-content: center; + } + .ok { + width: 76px; + height: 40px; + cursor: pointer; + border-radius: 20px; + background-color: var(--colorCard) !important; + border-color: var(--colorCard) !important; + color: #fff; + line-height: 40px; + font-size: 14px; + display: flex; + align-items: center; + justify-content: center; + } + } + .login-content { + box-sizing: border-box; + .el-input__prefix { + left: 20px; + transition: all 0.3s; + font-size: 20px; + } + .el-input__suffix-inner { + .code-btn { + padding: 6px 20px; + border: none; + border-left: 1px solid #d4d6d9; + color: var(--colorCard); + } + .code-btn:hover { + background: none; + } + } + .el-input__inner { + background-color: #ffffff; + border: 1px solid #d4d6d9; + box-sizing: border-box; + color: #606266; + display: inline-block; + font-size: 14px; + height: 40px; + line-height: 40px; + outline: none; + padding: 0 50px; + transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); + width: 100%; + border-radius: 20px; + } + } + .el-dialog__footer { + padding: 30px ; + text-align: left; + box-sizing: border-box; + box-shadow: 0px -1px 0px rgb(0 0 0 / 8%);} + .el-dialog__header { + padding: 14px 20px 13px; + text-align: center; + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08); + .el-dialog__title { + font-weight: 600; + font-size: 18px; + color: #5f5f5f; + line-height: 25px; + } } .el-dialog__body { + padding: 30px 30px 10px 30px; + } + .info { text-align: left; } } -.login-content { - box-sizing: border-box; - padding: 0 30px; - .el-input__inner { - -webkit-appearance: none; - background-color: #ffffff; - background-image: none; - border-radius: 4px; - border: 1px solid #dcdfe6; +.el-dialog.my-activate { + border-radius: 24px; + .el-dialog__footer { + padding: 30px; + text-align: left; box-sizing: border-box; - color: #606266; - display: inline-block; - font-size: 16px; - border-radius: 5px; - height: 40px; - line-height: 40px; - outline: none; - padding: 0 15px; - transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); - width: 100%; + box-shadow: 0px -1px 0px rgb(0 0 0 / 8%); + .btns { + display: flex; + .cancel { + width: 140px; + height: 40px; + cursor: pointer; + border-radius: 20px; + line-height: 40px; + font-size: 14px; + color: var(--colorCard); + border-color: var(--colorCard) !important; + margin-right: 12px; + display: flex; + align-items: center; + justify-content: center; + } + .ok { + width: 140px; + height: 40px; + cursor: pointer; + border-radius: 20px; + background-color: var(--colorCard) !important; + border-color: var(--colorCard) !important; + color: #fff; + line-height: 40px; + font-size: 14px; + display: flex; + align-items: center; + justify-content: center; + } + } } } .el-dialog.my-order { @@ -544,7 +682,7 @@ i { margin-right: 5px; font-size: 16px; - color: rgb(24, 144, 255); + color: var(--colorCard); } span { font-size: 14px; @@ -605,7 +743,7 @@ line-height: 45px; border-radius: 5px; .go-to { - color: rgba(71, 153, 247, 1); + color: var(--colorCard); cursor: pointer; text-decoration: underline; font-weight: 600; -- Gitblit v1.8.0