From ba2dff93d5a73e0824d1da91ea01571e60e2ff2a Mon Sep 17 00:00:00 2001 From: hanbaoshan <hanbaoshan@aiotlink.com> Date: 星期四, 24 九月 2020 10:59:00 +0800 Subject: [PATCH] 桌面应用名称颜色恢复 --- src/pages/ai/index/App.vue | 531 ++++++++++++++++++++++++++++++++++++++++------------------ 1 files changed, 365 insertions(+), 166 deletions(-) diff --git a/src/pages/ai/index/App.vue b/src/pages/ai/index/App.vue index 1917651..83b1d58 100644 --- a/src/pages/ai/index/App.vue +++ b/src/pages/ai/index/App.vue @@ -25,16 +25,21 @@ <div class="flex-list"> <div class="wrap-box" v-for="item in ungradeList" :key="item.id"> <div class="list-choose-item-left"> - <div class="mask"> + <div class="mask flex-center"> + <div class="info-onmask"> + <div>褰撳墠鐗堟湰:{{item.version}}</div> + <div>鏈�鏂扮増鏈�:{{item.remoteVersion}}</div> + </div> <el-button type="primary" class="bot-btn" @click="donwload(item)">鍗囩骇</el-button> </div> <div class="list-complete-item-handle"> <div class="svg-wrap"> - <!-- <svg class="icon" aria-hidden="true" style="font-size:7rem;"> - <use :xlink:href="`#${item.icon}`" /> - </svg> --> - <img class="baseImg" :src="`data:image/png;base64,${item.iconBlob}`" alt=""> + <img + class="baseImg" + :src="`data:image/png;base64,${item.iconBlob}`" + alt + /> </div> <div class="alg-name"> <div style="padding:0px 10px 0px 10px;"> @@ -46,19 +51,13 @@ </div> <div class="wrap-box" v-for="(item) in installedList" :key="item.id"> <div class="list-choose-item-left"> - <div class="mask" v-if="!item.isEdit"> - <el-button - @click="commandAlgLib(item)" - type="primary" - class="bot-btn" - >缂栬緫鍚嶇О</el-button> - </div> - <div class="list-complete-item-handle"> - <!-- <span :class="`iconfont ${item.icon}`" style="font-size:3rem;"></span> --> + <div class="list-complete-item-handle"> <div class="svg-wrap"> - <!-- <svg class="icon" aria-hidden="true" style="font-size:7rem;"> - <use :xlink:href="`#${item.icon}`" /> - </svg>--> + <div class="mask flex-center" v-if="!item.isEdit"> + <div class="info-onmask"> + <div>褰撳墠鐗堟湰:{{item.version}}</div> + </div> + </div> <img class="baseImg" :src="`data:image/png;base64,${item.iconBlob}`" @@ -95,12 +94,12 @@ <span class="iconfont iconxiazai1"></span> </div> <div class="list-complete-item-handle"> - <!-- <span :class="`iconfont ${item.icon}`" style="font-size:3rem;"></span> --> <div class="svg-wrap"> - <!-- <svg class="icon" aria-hidden="true" style="font-size:7rem;"> - <use :xlink:href="`#${item.icon}`" /> - </svg> --> - <img class="baseImg" :src="`data:image/png;base64,${item.iconBlob}`" alt=""> + <img + class="baseImg" + :src="`data:image/png;base64,${item.iconBlob}`" + alt + /> </div> <div class="alg-name"> <div style="padding:0px 10px 0px 10px;"> @@ -112,6 +111,38 @@ </div> </div> <p class="src-title">搴旂敤杞欢</p> + <div class="flex-list"> + <div class="wrap-box" v-for="(item) in installedApps" :key="item.id"> + <div class="list-choose-item-left"> + <div class="list-complete-item-handle"> + <div class="svg-wrap" v-loading="item.unloadLoading" element-loading-text="鍗歌浇涓�" element-loading-background="rgba(0,0,0,.8)"> + <div class="mask" v-if="!item.isDefault"> + <el-button + v-if="!item.isDefault" + @click="unLoad(item)" + type="primary" + class="bot-btn" + >鍗歌浇</el-button> + </div> + <img class="baseImg" :src="`${item.iconBlob?'data:image/png;base64,'+item.iconBlob:item.icon}`" alt /> + </div> + <div class="alg-name"> + <div style="padding:0px 10px 0px 10px;"> + <span v-if="!item.isEdit">{{ item.name }}</span> + <el-input + size="small" + v-model="item.sdk_name" + v-if="item.isEdit" + v-focus + :maxlength="15" + @blur="inputBlur(item)" + ></el-input> + </div> + </div> + </div> + </div> + </div> + </div> </div> </el-tab-pane> @@ -137,25 +168,73 @@ <el-tab-pane label="搴旂敤涓績" name="algorithmMall" v-show="activeName==='algorithmMall'"> <div class="tab-content"> <p class="src-title">绠楁硶杞欢</p> - <div class="store-list"> - <div class="wrap-box"> - <div class="inner"> - <div class="mask" @click="actDrawerShow=true"> - <svg class="icon" aria-hidden="true" style="font-size:2rem;"> - <use xlink:href="#iconyunxiazai" /> - </svg> + <div class="store-list flex-list"> + <div class="wrap-box" v-for="item in unActivedSDKList" :key="item.id"> + <div class="list-choose-item-left"> + <div class="list-complete-item-handle"> + <div class="alg-icon svg-wrap"> + <div class="mask" @click="actSdk(item.id)"> + <span + class="iconfont iconyunxiazai" + style="color:#ff6a00;font-size:20px;position:absolute;top:45%;left:45%" + ></span> + </div> + <img + class="baseImg" + :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`" + alt + /> + </div> + <div class="alg-name"> + <div style="padding:0px 10px 0px 10px;"> + <span v-if="!item.isEdit">{{ item.sdk_name }}</span> + <el-input + size="small" + v-model="item.sdk_name" + v-if="item.isEdit" + v-focus + :maxlength="15" + @blur="inputBlur(item)" + ></el-input> + </div> + </div> </div> - <div class="alg-icon"> - <svg class="icon" aria-hidden="true" style="font-size:7rem;"> - <use xlink:href="#iconrenyuanyidong" /> - </svg> - </div> - <div class="alg-name">name</div> </div> </div> </div> <p class="src-title">搴旂敤杞欢</p> - <div class="app-list"></div> + <div class="app-list flex-list"> + <div class="wrap-box" v-for="item in storeApps" :key="item.id"> + <div class="list-choose-item-left"> + <div class="list-complete-item-handle"> + <div class="svg-wrap" v-loading="item.installLoading" element-loading-text="瀹夎涓�" element-loading-background="rgba(0,0,0,.8)"> + <div class="mask"> + <el-button type="primary" class="bot-btn" @click="downloadApp(item)">瀹夎</el-button> + </div> + <img + class="baseImg" + :src="item.iconBlob? 'data:image/png;base64,'+item.iconBlob:item.icon" + alt + /> + </div> + <div class="alg-name"> + <div style="padding:0px 10px 0px 10px;"> + <span v-if="!item.isEdit">{{ item.name }}</span> + <el-input + size="small" + v-model="item.name" + v-if="item.isEdit" + v-focus + :maxlength="15" + @blur="inputBlur(item)" + ></el-input> + </div> + </div> + </div> + </div> + </div> + </div> + </div> <el-drawer title="涓嬭浇" :visible.sync="actDrawerShow" :direction="direction"> <div class="drawer-content"> @@ -183,28 +262,28 @@ <ul class="desc"> <li> <label>婵�娲荤爜:</label> - <span>YUAAA-AAAEU-QJQE3-ZRRXD-K9MWR</span> + <span>{{activedSdk.activateCode}}</span> </li> <li> <label>浜у搧鍚嶇О:</label> - <span>浜哄憳璺熻釜SDK</span> + <span>{{activedSdk.productName}}</span> </li> <li> <label>閰嶇疆璇︽儏:</label> - <span>鏃�</span> + <span>{{activedSdk.setting}}</span> </li> <li> <label>鏈嶅姟鍒版湡鏃�:</label> - <span>2021-03-04</span> + <span>{{activedSdk.expireTime}}</span> </li> <li> <label>璁稿彲璇�:</label> - <span>鏈澶�</span> + <span>{{activedSdk.licence}}</span> </li> - <li> + <!-- <li> <label>璁惧ID:</label> <span>3342-235f-ret55-fdsg</span> - </li> + </li>--> </ul> <div class="text-right"> <el-button type="primary" @click="checkMyAlgorith">纭畾</el-button> @@ -241,6 +320,8 @@ downloadSdk, installSdk } from "./api"; +import { getApps,installApp,removeApp } from "@/api/app"; +import { getUnActivedSdk, actPageAlg } from "@/api/app"; import FileUploader from "@/components/subComponents/FileUpload/index"; import TaskManage from "@/Pool/TaskMange"; import VideoManageData from "@/Pool/VideoManageData"; @@ -251,25 +332,26 @@ FileUploader }, computed: { - notInstalledList() { + notInstalledList () { return this.TaskMange.list1.filter(sdk => { return sdk.installed === false; }); }, - installedList() { + installedList () { return this.TaskMange.list1.filter(sdk => { return sdk.installed === true; }); }, - ungradeList() { + ungradeList () { // 鍗囩骇澶勭悊浼氬鑷撮噸澶嶇殑key,闇�瑕佷慨鏀� return []; return this.TaskMange.list1.filter(sdk => { return sdk.isUpgrade === true; }); - } + }, + }, - data() { + data () { return { TaskMange: new TaskManage, VideoManageData: new VideoManageData, @@ -335,12 +417,26 @@ sceneSdks: [], sceneRuleList: "", isInstall: false, - installPercentage: 0 + installPercentage: 0, + unActivedSDKList: [], + actSdkId: '', + activedSdk: { + activateCode: '', + productName: '', + setting: '', + expireTime: '', + licence: '', + devIds: '' + }, + // unloadLoading: false, + // installLoading: false, + installedApps:[], + storeApps:[] } }, watch: { list2: { - handler(newVal, oldVal) { + handler (newVal, oldVal) { // window.console.log(newVal, oldVal, '鐩戝惉list2') if (newVal !== oldVal) { // window.console.log(newVal, '鐩戝惉list2') @@ -361,30 +457,125 @@ } } }, - mounted() { + mounted () { + this.getAllApps(); this.findAllSdk(); this.findByType(); this.getBaseList(); this.findAll(); this.getUser(); + this.getUnActivedList(); // this.TaskMange.findAllSdk(); // this.TaskMange.findByType(); this.VideoManageData.init(); }, methods: { - installFormat(percentage) { + downloadApp(app){ + app.installLoading = true; + let _this = this; + installApp(app).then(res=>{ + if(res && res.success){ + setTimeout(()=>{ + app.installLoading = false; + _this.getAllApps(); + window.parent.postMessage({ + msg: "AppUpdate" + }, '*') + },3000); + } + }) + }, + getAllApps(){ + let _this = this; + _this.installedApps = []; + _this.storeApps = []; + getApps().then(res=>{ + if(res && res.success){ + //_this.storeApps = res.data; + res.data.forEach(item=>{ + if(item.installed){ + let obj = Object.assign({unloadLoading:false},item) + _this.installedApps.push(obj) + }else{ + let obj = Object.assign({installLoading:false},item) + _this.storeApps.push(obj) + } + }); + console.log('_this.installedApps',_this.installedApps); + console.log('_this.storeApps',_this.storeApps); + } + }) + }, + //鍗歌浇搴旂敤 + unLoad(app){ + app.unloadLoading = true; + let _this = this; + removeApp({appId:app.id}).then(res=>{ + + if(res && res.success){ + setTimeout(()=>{ + app.unloadLoading = false; + _this.getAllApps(); + window.parent.postMessage({ + msg: "AppUpdate" + }, '*') + },3000); + } + }) + + }, + actSdk (id) { + this.actSdkId = id; + this.actDrawerShow = true; + this.actStep = 0; + this.activeCode = ''; + this.activedSdk = this.newActInfo() + }, + newActInfo(){ + return { + activateCode: '', + productName: '', + setting: '', + expireTime: '', + licence: '', + devIds: '' + } + }, + getUnActivedList () { + getUnActivedSdk().then(res => { + if (res.code == 200) { + this.unActivedSDKList = res.data; + } + }) + + }, + installFormat (percentage) { return percentage === 100 ? '瀹夎鎴愬姛' : `${percentage}%`; }, - actived() { - //this.activeCode - this.actStep++ + actived () { + let _this = this; + actPageAlg(this.actSdkId, this.activeCode).then(res => { + if (res.data.isSuccess) { + _this.activedSdk = res.data.successMsg; + _this.actStep++; + _this.getUnActivedList(); + _this.findAllSdk(); + }else{ + _this.$notify({ + type:'error', + message:res.data.failMsg.failMsg + }); + } + }).catch(e => { + console.log(e) + }) }, - getCodeDetail() { }, - checkMyAlgorith() { + getCodeDetail () { }, + checkMyAlgorith () { this.actDrawerShow = false; this.activeName = "myAlgorithm"; }, - onFileUpload(file) { + onFileUpload (file) { //this.patchUpdateStatus = `<span style="color:green">涓婁紶鎴愬姛, 鐐瑰嚮鍗囩骇鎸夐挳寮�濮嬪畨瑁�</span>`; this.patchFile = { ...file }; this.fileAdded = true; @@ -435,7 +626,7 @@ //瀹夎 installSdk(file).then(res => { if (res.success) { - debugger + this.isInstall = false; //this.$refs['progressBar'].style.width = 100% //this.installPercentage = 100% @@ -455,12 +646,12 @@ }, - onFileAdded(f) { - debugger; + onFileAdded (f) { + ; this.patchUpdateStatus = ""; }, // 鏍¢獙杈撳叆鐨勬槸鍚︽槸鏁板瓧 - valiNum(value) { + valiNum (value) { if (value) { let re = /[^\-?\d.]*$/; if (!re.test(value)) { @@ -477,7 +668,7 @@ } }, // 宸﹁竟鎷栧姩妯″潡寰楁嫋鍔ㄧ粨鏉熷悗鐨勮Е鍙戝嚱鏁� - endLeft(env) { + endLeft (env) { this.dragging = false; let taskId = env.to.id; let sdkId = this.TaskMange.list1[env.oldIndex].id; @@ -518,24 +709,24 @@ this.addTaskSdk(json); }, // 鍙宠竟鎷栧姩妯″潡寮�濮嬫嫋鍔ㄨЕ鍙戝嚱鏁� - startRight(env) { + startRight (env) { this.$nextTick(() => { this.dragging = true; }); // window.window.console.log(env, "right start"); }, // 鍙宠竟鎷栧姩妯″潡鎷栧姩缁撴潫瑙﹀彂鍑芥暟 - endRight(env) { + endRight (env) { // window.window.console.log(env, "right end"); }, - clickSet(data) { + clickSet (data) { if (data.isSetting) { data.isSetting = false; } else { data.isSetting = true; } }, - clickDel(data, Index) { + clickDel (data, Index) { this.$confirm("鎻愮ず锛氬垹闄ゅ悗锛屾浠诲姟鍦ㄦ憚鍍忔満涓殑搴旂敤澶辨晥锛屾槸鍚﹀垹闄わ紵", { center: true, showConfirmButton: true, @@ -548,7 +739,7 @@ }) .catch(err => { }); }, - clickSetAlgo(row, data) { + clickSetAlgo (row, data) { // window.console.log(row, data, "缂栬緫浠诲姟涓煇涓�涓畻娉�"); if (row.isShowSetAlgo && data.id === this.TaskMange.currentAlgoId) { row.isShowSetAlgo = false; @@ -614,7 +805,7 @@ // }); } }, - async getRulesByTaskSdk(taskId, sdkId) { + async getRulesByTaskSdk (taskId, sdkId) { let res = await getRulesByTaskSdk({ taskId: taskId, sdkId: sdkId @@ -650,10 +841,9 @@ this.argsList = JSON.parse(JSON.stringify(this.TaskMange.argsList)); } }, - async findAllSdk() { + async findAllSdk () { let res = await findAllSdk(); if (res && res.success) { - // debugger this.TaskMange.list1 = res.data.map((i, index) => { this.$set(i, "isEdit", false); //mock 鏈畨瑁�/寰呭崌绾� @@ -668,7 +858,7 @@ }); } }, - addTask() { + addTask () { let obj = { id: "", name: "浠诲姟" + this.TaskMange.list2.length, @@ -684,7 +874,7 @@ taskArea.scrollTop = taskArea.scrollHeight; }); }, - async findAll() { + async findAll () { let res = await findAll(); if (res && res.success) { if (res.data && res.data.length !== 0) { @@ -721,7 +911,7 @@ } } }, - clickDelSdk(task, sdk) { + clickDelSdk (task, sdk) { this.$confirm( "鎻愮ず锛氬垹闄ゅ悗锛屾绠楁硶鍦ㄦ湰浠诲姟涓Щ闄わ紝鍚屾椂鍦ㄦ憚鍍忔満涓殑搴旂敤澶辨晥锛屾槸鍚﹀垹闄わ紵", { @@ -737,7 +927,7 @@ }) .catch(err => { }); }, - selectChange(event, type, data) { + selectChange (event, type, data) { if (type === "options1") { // window.window.console.log(type, data, "閫夋嫨涓嬫媺妗�"); data.options1.map(i => { @@ -748,7 +938,7 @@ } }, // 鍒犻櫎浠诲姟绠楁硶 - async delTaskSdk(task, sdk) { + async delTaskSdk (task, sdk) { let json = { taskId: task.id, sdkId: sdk.id @@ -768,7 +958,7 @@ } }, // 鍒犻櫎浠诲姟 - async deleteTask(data, index) { + async deleteTask (data, index) { // window.console.log(data, "deleteTask"); let res = await deleteTask({ taskId: data.id }); // this.$toast({ @@ -785,7 +975,7 @@ } }, // 鏇存柊浠诲姟鐘舵�� - async updateTaskStatus(data) { + async updateTaskStatus (data) { // window.console.log(data, '鏇存柊浠诲姟鐘舵��') let json = { taskId: data.id, @@ -803,7 +993,7 @@ }); }, // 鏇存柊浠诲姟鍚嶇О - async updateTaskName(data) { + async updateTaskName (data) { let json = { taskId: data.id, taskName: data.name @@ -823,7 +1013,7 @@ } }, // 鑾峰彇搴曞簱鏁版嵁 - async getBaseList() { + async getBaseList () { // let res = await getTagList(); // if (res && res.success) { // let filter = res.data.filter(i => { @@ -852,7 +1042,7 @@ ]; }, // 鑾峰彇绠楁硶鍙傛暟 - async getSdkArgs(data) { + async getSdkArgs (data) { let res = await getSdkArgs({ sdkId: data.id, scope: "TASKRULE" @@ -874,7 +1064,7 @@ } }, // 鏌ヨ瀛楀吀 - async findByType() { + async findByType () { let res = await findByType(); if (res && res.success) { let list = res.data.RULECOMPUTEBETWEEN.map(i => { @@ -887,17 +1077,17 @@ } }, // 绠楁硶閰嶇疆锛屾柊寤� - add() { + add () { this.TaskMange.argsList.push( JSON.parse(JSON.stringify(this.TaskMange.baseObject)) ); }, // 绠楁硶閰嶇疆 鍒犻櫎 - delRule(index) { + delRule (index) { this.TaskMange.argsList.splice(index, 1); }, // 绠楁硶鍙傛暟淇濆瓨 - async save() { + async save () { let list = this.TaskMange.argsList.map(i => { let obj = {}; obj.id = i.id; @@ -930,7 +1120,7 @@ } } }, - getDefault() { + getDefault () { this.deleteTaskSdkRule( this.TaskMange.currentTaskId, this.TaskMange.currentAlgoId @@ -941,7 +1131,7 @@ ); }); }, - async deleteTaskSdkRule(taskId, sdkId) { + async deleteTaskSdkRule (taskId, sdkId) { let json = { taskId: taskId, sdkId: sdkId @@ -961,7 +1151,7 @@ } }, // 缁欎换鍔℃坊鍔犵畻娉� - async addTaskSdk(data) { + async addTaskSdk (data) { let res = await addTaskSdk(data); if (res && res.success) { // window.console.log(res, 'res') @@ -969,7 +1159,7 @@ } }, // 鏂版坊鍔犱换鍔� - async addTaskAsync(name) { + async addTaskAsync (name) { let res = await addTask({ taskname: name }); // this.$toast({ // type: res.success ? "success" : "error", @@ -985,7 +1175,7 @@ this.findAll(); } }, - cancle(row) { + cancle (row) { if (row.isShowSetAlgo) { row.isShowSetAlgo = false; } @@ -995,12 +1185,12 @@ this.$set(i, "isSelect", false); }); }, - cancleTask(row) { + cancleTask (row) { if (row.isSetting) { row.isSetting = false; } }, - commandAlgo(command, row, item) { + commandAlgo (command, row, item) { if (command === 1) { // console.log('璁剧疆绠楁硶') this.clickSetAlgo(row, item); @@ -1010,13 +1200,13 @@ this.clickDelSdk(row, item); } }, - commandTask(command, row) { + commandTask (command, row) { if (command === 1) { //缂栬緫浠诲姟 this.clickSet(row); } }, - getUser() { + getUser () { // console.log("鐧诲綍鐢ㄦ埛",JSON.parse(sessionStorage.getItem("userInfo")).username) if ( sessionStorage.getItem("userInfo") && @@ -1029,7 +1219,7 @@ this.isSuperUser = false; } }, - donwload(item) { + donwload (item) { this.downloading = true; this.downloadItem = item.id; @@ -1053,15 +1243,15 @@ this.downloadItem = ""; }); }, - commandAlgLib(item) { + commandAlgLib (item) { this.$set(item, "isEdit", true); }, - inputBlur(item) { + inputBlur (item) { // console.log(item, '淇敼鍚嶇О') this.$set(item, "isEdit", false); }, - - cleanTemplateForm() { + + cleanTemplateForm () { this.appSceneForm.name = ""; this.appSceneForm.desc = ""; this.appSceneForm.rules = ""; @@ -1069,10 +1259,10 @@ this.$refs.ruleEditor.cleanRule(); }, - handleTabClick() { - + handleTabClick () { + }, - handleCreateScene() { + handleCreateScene () { this.sceneDialogVisible = true; this.dialogTitle = '鍒涘缓鍦烘櫙妯℃澘'; @@ -1085,10 +1275,10 @@ this.cleanTemplateForm(); }); }, - handleDialogClose() { + handleDialogClose () { this.sceneDialogVisible = false; }, - handleEditScene(item) { + handleEditScene (item) { this.appSceneForm.name = item.name; this.appSceneForm.desc = item.desc; @@ -1097,8 +1287,8 @@ this.sceneDialogVisible = true; this.dialogTitle = '缂栬緫鍦烘櫙妯℃澘'; }, - - + + } }; </script> @@ -1150,7 +1340,25 @@ color: #606266; cursor: pointer; } - +.el-loading-mask .el-loading-spinner{ + top: 40px!important; +} +.el-loading-mask .el-loading-spinner svg{ + transform: none!important; + top: 20px!important; + left: 40%!important; +} +.el-loading-mask .el-loading-spinner p.el-loading-text{ + display: block!important; + text-align: center!important; + bottom: 10px!important; + top: 80px!important; + right: 0 !important; + color: #78adf7; +} +.el-loading-mask .el-loading-spinner .path{ + stroke: #78adf7; +} .installInfo { text-indent: 2em; font-size: 14px; @@ -1160,8 +1368,9 @@ color: #666; } } -.src-title{ - color: #333; +.src-title { + //color: #bfbfbf; + color: #bbcee8; font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC'; font-weight: 650; font-style: normal; @@ -1187,7 +1396,7 @@ position: absolute; top: 50%; left: 50%; - background: url("/images/algo/green.gif"); + background: url('/images/algo/green.gif'); overflow: hidden; transform: translate(-50%, -50%); .inner-bar { @@ -1242,7 +1451,15 @@ height: 100%; box-sizing: border-box; // float: left; - + .el-drawer__header { + border-bottom: 2px solid #eee; + padding-bottom: 10px; + font-size: 16px; + margin-bottom: 0px; + span { + outline: none !important; + } + } .action-bar { margin-bottom: 30px; .el-input { @@ -1250,44 +1467,23 @@ } } .task-list { - background: #fff; + background: #fdfdfd; padding: 20px; box-sizing: border-box; - + .flex-list { display: flex; flex-direction: row; flex-wrap: wrap; - // justify-content: space-around; - // align-content: space-around; - // &:after { - // content: ""; - // flex: auto; - // } .wrap-box { width: 16.66%; } .list-choose-item-left { - // width: 220px; - // height: 214px; width: 80%; height: auto; margin: auto; margin-bottom: 30px; - // @media screen and(min-width: 1895px) { - // //margin: 20px 25px 20px 20px; - // width: 230px; - // height: 224px; - // } - // @media screen and(min-width: 1695px) and(max-width:1895px ) { - // margin: 20px 10px 20px 15px; - // } - // @media screen and(min-width: 1460px) and(max-width: 1695px) { - // margin: 20px 25px 20px 20px; - // } - // @media screen and(max-width: 1460px) { - // margin: 20px 15px 20px 10px; - // } + max-width: 200px; } } } @@ -1450,12 +1646,19 @@ } } } - .store-list { + .store-list,.app-list { display: flex; flex-wrap: wrap; .wrap-box { width: 16.6%; margin-bottom: 30px; + .list-choose-item-left { + width: 80%; + height: auto; + margin: auto; + margin-bottom: 30px; + max-width: 200px; + } .inner { width: 80%; box-sizing: border-box; @@ -1514,16 +1717,16 @@ } } .drawer-content { - font-family: "PingFangSC-Regular"; + font-family: 'PingFangSC-Regular'; .el-step__title.is-process { border-color: #3d68e1 !important; color: #3d68e1 !important; - font-family: Tahoma, Helvetica, Arial, "\5B8B\4F53", sans-serif; + font-family: Tahoma, Helvetica, Arial, '\5B8B\4F53', sans-serif; } .el-step__head.is-process { border-color: #3d68e1 !important; color: #3d68e1 !important; - font-family: Tahoma, Helvetica, Arial, "\5B8B\4F53", sans-serif; + font-family: Tahoma, Helvetica, Arial, '\5B8B\4F53', sans-serif; } .el-input { width: 100%; @@ -1560,6 +1763,7 @@ } .text-right { padding-right: 30px; + text-align: right; .tip { color: #999; line-height: 38px; @@ -1596,7 +1800,9 @@ z-index: 1; border-radius: 3px; display: none; - + .info-onmask{ + color: #8ecaff; + } i { color: #fff; position: relative; @@ -1660,28 +1866,9 @@ cursor: pointer; position: relative; font-size: 14px; - // display: inline-block; - // @media screen and(min-width: 1895px) { - // //margin: 20px 25px 20px 20px; - // margin: 20px 30px 20px 20px; - // } - // @media screen and(min-width: 1695px) and(max-width:1895px ) { - // margin: 20px 10px 20px 15px; - // } - // @media screen and(min-width: 1460px) and(max-width: 1695px) { - // margin: 20px 25px 20px 20px; - // } - // @media screen and(max-width: 1460px) { - // margin: 20px 15px 20px 10px; - // } - // width: 126px; - // height: 120px; - // width: 220px; - // height: 214px; + transition: all 1s; background: #ffffff; - border: 1px solid #e2e2e2; - box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07); border-radius: 4px; p { display: none; @@ -1701,10 +1888,16 @@ .mask { display: flex; align-items: flex-end; + top: 0; .bot-btn { flex: 1; } + &.flex-center{ + align-items: center; + justify-content: center; + } } + } .list-choose-item-left-uninstal { color: darkgray; @@ -1816,11 +2009,12 @@ color: #222222; } .alg-name { - margin-top: 12px; + //margin-top: 12px; line-height: 36px; font-family: PingFangSC-Regular; - font-size: 15px; - color: #222222; + font-size: 14px; + letter-spacing: 0.05em; + color: #3e4664; // background-color: #ecf5ff; .el-input { position: relative; @@ -1852,13 +2046,16 @@ } .list-complete-item-handle { height: 100%; - padding-bottom: 10px; + //padding-bottom: 10px; text-align: center; .svg-wrap { - width: 80%; + //width: 80%; + width: 100%; margin: auto; padding-top: 80%; + padding-top: 100%; position: relative; + box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07); svg { position: absolute; top: 50%; @@ -1866,11 +2063,13 @@ transform: translate(-50%, -50%); } .baseImg { - width: 60%; + width: 56%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); + max-width: 106px; + max-height: 106px; } } } -- Gitblit v1.8.0