From 6990d156c6c89ddb2cb109aca859246f4bb6c26e Mon Sep 17 00:00:00 2001 From: heyujie <516346543@qq.com> Date: 星期二, 02 三月 2021 20:48:17 +0800 Subject: [PATCH] 应用中心查看详情 --- src/pages/ai/index/App.vue | 1357 ++++++++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 1,013 insertions(+), 344 deletions(-) diff --git a/src/pages/ai/index/App.vue b/src/pages/ai/index/App.vue index dd61f65..10345bb 100644 --- a/src/pages/ai/index/App.vue +++ b/src/pages/ai/index/App.vue @@ -1,6 +1,6 @@ <template> <div class="s-task-manage"> - <div style="height:100%;"> + <div style="height: 100%"> <div class="flex-box task-manage"> <div class="installModel" v-if="isInstall"> <div class="progress-bar"> @@ -17,10 +17,13 @@ v-model="activeName" type="border-card" @tab-click="handleTabClick" - style="height: calc(100% - 20px);" + style="height: calc(100% - 20px)" > <el-tab-pane label="宸叉縺娲�" name="myAlgorithm"> - <div class="width-new-line task-list" v-show="activeName === 'myAlgorithm'"> + <div + class="width-new-line task-list" + v-show="activeName === 'myAlgorithm'" + > <p class="src-title">绠楁硶杞欢</p> <div class="flex-list"> <!-- <div class="wrap-box" v-for="item in ungradeList" :key="'upgrade'+item.id"> @@ -64,50 +67,75 @@ </div> </div> </div>--> - <div class="wrap-box" v-for="(item) in installedList" :key="item.id"> + <div + class="wrap-box" + v-for="item in installedList" + :key="item.id" + > <div class="list-choose-item-left"> <div class="list-complete-item-handle"> <div class="svg-wrap" - :class="{willUpGrade:item.isUpgrade}" + :class="{ willUpGrade: item.isUpgrade }" v-loading="item.upgradeLoading" :element-loading-text="item.progressMsg" element-loading-background="rgba(0,0,0,.8)" > - <i class="iconfont iconupdate" v-if="item.isUpgrade"></i> - <div class="mask" v-if="!item.isDefault || item.isUpgrade"> + <i + class="iconfont iconupdate" + v-if="item.isUpgrade" + ></i> + <div + class="mask" + v-if="!item.isDefault || item.isUpgrade" + > <div class="left-top"> - <div>褰撳墠鐗堟湰:{{item.version}}</div> - <div v-if="item.remoteVersion">鏈�鏂扮増鏈�:{{item.remoteVersion}}</div> + <div>褰撳墠鐗堟湰:{{ item.version }}</div> + <div v-if="item.remoteVersion"> + 鏈�鏂扮増鏈�:{{ item.remoteVersion }} + </div> </div> - <div class="info-onmask" @click="checkDetail(item)">鏌ョ湅璇︽儏</div> + <div + class="info-onmask" + @click="checkDetail(item)" + > + 鏌ョ湅璇︽儏 + </div> <div class="mask-btn"> <el-button @click="unLoadSdk(item)" type="primary" size="small" class="bot-btn" - >鍗歌浇</el-button> + >鍗歌浇</el-button + > <el-button v-if="item.isUpgrade" @click="donwload(item)" type="warning" size="small" class="bot-btn" - >鍗囩骇</el-button> + >鍗囩骇</el-button + > </div> </div> <img v-if="item.iconBlob" class="baseImg" - :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`" + :src=" + item.iconBlob.indexOf(',') > 0 + ? item.iconBlob + : `data:image/png;base64,${item.iconBlob}` + " alt /> <img v-else class="baseImg" :src="item.icon" alt /> </div> <div class="alg-name"> - <div style="padding:0px 10px 0px 10px;"> - <span v-if="!item.isEdit">{{ item.sdk_name }}</span> + <div style="padding: 0px 10px 0px 10px"> + <span v-if="!item.isEdit">{{ + item.sdk_name + }}</span> <el-input size="small" @@ -123,13 +151,22 @@ </div> </div> <!-- </draggable> --> - <div class="wrap-box" v-for="(item) in notInstalledList" :key="item.id"> + <div + class="wrap-box" + v-for="item in notInstalledList" + :key="item.id" + > <div class="list-choose-item-left list-choose-item-left-uninstal" v-loading="downloading && downloadItem == item.id" > <div class="mask"> - <el-button type="primary" class="bot-btn" @click="donwload(item)">瀹夎</el-button> + <el-button + type="primary" + class="bot-btn" + @click="donwload(item)" + >瀹夎</el-button + > </div> <div class="click-download" title="涓嬭浇"> <span class="iconfont iconxiazai1"></span> @@ -137,21 +174,29 @@ <div class="list-complete-item-handle"> <div class="svg-wrap" - v-loading="item.installLoading||item.upgradeLoading" + v-loading=" + item.installLoading || item.upgradeLoading + " :element-loading-text="item.progressMsg" element-loading-background="rgba(0,0,0,.8)" > <img v-if="item.iconBlob" class="baseImg" - :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`" + :src=" + item.iconBlob.indexOf(',') > 0 + ? item.iconBlob + : `data:image/png;base64,${item.iconBlob}` + " alt /> <img v-else class="baseImg" :src="item.icon" alt /> </div> <div class="alg-name"> - <div style="padding:0px 10px 0px 10px;"> - <span class="list-choose-item-left-uninstal">{{ item.sdk_name }}</span> + <div style="padding: 0px 10px 0px 10px"> + <span class="list-choose-item-left-uninstal">{{ + item.sdk_name + }}</span> </div> </div> </div> @@ -160,23 +205,39 @@ </div> <p class="src-title">搴旂敤杞欢</p> <div class="flex-list"> - <div class="wrap-box" v-for="(item) in installedApps" :key="item.id"> + <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" - :class="{willUpGrade:item.isUpgrade}" - v-loading="item.unloadLoading||item.upgradeLoading" + :class="{ willUpGrade: item.isUpgrade }" + v-loading=" + item.unloadLoading || item.upgradeLoading + " :element-loading-text="item.progressMsg" element-loading-background="rgba(0,0,0,.8)" > - <i class="iconfont iconupdate" v-if="item.isUpgrade"></i> + <i + class="iconfont iconupdate" + v-if="item.isUpgrade" + ></i> <div class="mask"> <div class="left-top"> - <div>褰撳墠鐗堟湰:{{item.version}}</div> - <div v-if="item.remoteVersion">鏈�鏂扮増鏈�:{{item.remoteVersion}}</div> + <div>褰撳墠鐗堟湰:{{ item.version }}</div> + <div v-if="item.remoteVersion"> + 鏈�鏂扮増鏈�:{{ item.remoteVersion }} + </div> </div> - <div class="info-onmask" @click="checkDetail(item)">鏌ョ湅璇︽儏</div> + <div + class="info-onmask" + @click="checkDetail(item)" + > + 鏌ョ湅璇︽儏 + </div> <div class="mask-btn"> <el-button v-if="!item.isDefault" @@ -184,26 +245,32 @@ type="primary" size="small" class="bot-btn" - >鍗歌浇</el-button> + >鍗歌浇</el-button + > <el-button v-if="item.isUpgrade" - @click="downloadApp(item,'upgrade')" + @click="downloadApp(item, 'upgrade')" type="warning" size="small" class="bot-btn" - >鍗囩骇</el-button> + >鍗囩骇</el-button + > </div> </div> <img v-if="item.iconBlob" class="baseImg" - :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`" + :src=" + item.iconBlob.indexOf(',') > 0 + ? item.iconBlob + : `data:image/png;base64,${item.iconBlob}` + " alt /> <img v-else class="baseImg" :src="item.icon" alt /> </div> <div class="alg-name"> - <div style="padding:0px 10px 0px 10px;"> + <div style="padding: 0px 10px 0px 10px"> <span v-if="!item.isEdit">{{ item.name }}</span> <el-input size="small" @@ -218,12 +285,18 @@ </div> </div> </div> - <div class="wrap-box" v-for="item in storeApps" :key="item.id"> + <div + class="wrap-box" + v-for="item in storeApps" + :key="item.id" + > <div class="list-choose-item-left"> <div class="list-complete-item-handle uninstall"> <div class="svg-wrap" - v-loading="item.installLoading||item.upgradeLoading" + v-loading=" + item.installLoading || item.upgradeLoading + " :element-loading-text="item.progressMsg" element-loading-background="rgba(0,0,0,.8)" > @@ -233,18 +306,23 @@ type="primary" class="bot-btn" @click="downloadApp(item)" - >瀹夎</el-button> + >瀹夎</el-button + > </div> <img v-if="item.iconBlob" class="baseImg" - :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`" + :src=" + item.iconBlob.indexOf(',') > 0 + ? item.iconBlob + : `data:image/png;base64,${item.iconBlob}` + " alt /> <img v-else class="baseImg" :src="item.icon" alt /> </div> <div class="alg-name"> - <div style="padding:0px 10px 0px 10px;"> + <div style="padding: 0px 10px 0px 10px"> <span v-if="!item.isEdit">{{ item.name }}</span> <el-input size="small" @@ -282,31 +360,51 @@ </div> </div> </el-tab-pane> - <el-tab-pane label="搴旂敤涓績" name="algorithmMall" v-if=" isShow('algorithmManage:buy')"> + <el-tab-pane + label="搴旂敤涓績" + name="algorithmMall" + v-if="isShow('algorithmManage:buy')" + > <div class="tab-content"> <p class="src-title">绠楁硶杞欢</p> <div class="store-list flex-list"> - <div class="wrap-box" v-for="item in unActivedSDKList" :key="item.id"> + <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="actSdkOrApp(item.id)"> <span class="iconfont iconyunxiazai" - style="color:#ff6a00;font-size:20px;position:absolute;top:45%;left:45%" + style=" + color: #ff6a00; + font-size: 20px; + position: absolute; + top: 45%; + left: 45%; + " ></span> </div> <img v-if="item.iconBlob" class="baseImg" - :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`" + :src=" + item.iconBlob.indexOf(',') > 0 + ? item.iconBlob + : `data:image/png;base64,${item.iconBlob}` + " alt /> <img v-else class="baseImg" :src="item.icon" alt /> </div> <div class="alg-name"> - <div style="padding:0px 10px 0px 10px;"> - <span v-if="!item.isEdit">{{ item.sdk_name }}</span> + <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" @@ -323,26 +421,43 @@ </div> <p class="src-title">搴旂敤杞欢</p> <div class="app-list flex-list"> - <div class="wrap-box" v-for="item in unActivedAppList" :key="item.id"> + <div + class="wrap-box" + v-for="item in unActivedAppList" + :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="actSdkOrApp(item.id,'app')"> + <div + class="mask" + @click="actSdkOrApp(item.id, 'app')" + > <span class="iconfont iconyunxiazai" - style="color:#ff6a00;font-size:20px;position:absolute;top:45%;left:45%" + style=" + color: #ff6a00; + font-size: 20px; + position: absolute; + top: 45%; + left: 45%; + " ></span> </div> <img v-if="item.iconBlob" class="baseImg" - :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`" + :src=" + item.iconBlob.indexOf(',') > 0 + ? item.iconBlob + : `data:image/png;base64,${item.iconBlob}` + " alt /> <img v-else class="baseImg" :src="item.icon" alt /> </div> <div class="alg-name"> - <div style="padding:0px 10px 0px 10px;"> + <div style="padding: 0px 10px 0px 10px"> <span v-if="!item.isEdit">{{ item.name }}</span> <el-input size="small" @@ -359,16 +474,24 @@ </div> </div> </div> - <el-drawer title="涓嬭浇" :visible.sync="actDrawerShow" :direction="direction"> + <el-drawer + title="涓嬭浇" + :visible.sync="actDrawerShow" + :direction="direction" + > <div class="drawer-content"> <div class="current-step"> - <el-steps align-center :active="actStep" finish-status="success"> + <el-steps + align-center + :active="actStep" + finish-status="success" + > <el-step title="娣诲姞婵�娲荤爜"></el-step> <el-step title="婵�娲绘垚鍔�"></el-step> </el-steps> </div> - <div v-if="actStep==0"> + <div v-if="actStep == 0"> <div class="act-code"> <p>浣跨敤婵�娲荤爜灏嗘柊鐨勭畻娉曟坊鍔犲埌鎮ㄧ殑璐︽埛</p> <el-input @@ -378,30 +501,32 @@ ></el-input> </div> <div class="text-right"> - <el-button type="primary" @click="actived">婵�娲�</el-button> + <el-button type="primary" @click="actived" + >婵�娲�</el-button + > </div> </div> - <div v-else-if="actStep==1"> + <div v-else-if="actStep == 1"> <ul class="desc"> <li> <label>婵�娲荤爜:</label> - <span>{{activedSdkOrApp.activateCode}}</span> + <span>{{ activedSdkOrApp.activateCode }}</span> </li> <li> <label>浜у搧鍚嶇О:</label> - <span>{{activedSdkOrApp.productName}}</span> + <span>{{ activedSdkOrApp.productName }}</span> </li> <li> <label>閰嶇疆璇︽儏:</label> - <span>{{activedSdkOrApp.setting}}</span> + <span>{{ activedSdkOrApp.setting }}</span> </li> <li> <label>鏈嶅姟鍒版湡鏃�:</label> - <span>{{activedSdkOrApp.expireTime}}</span> + <span>{{ activedSdkOrApp.expireTime }}</span> </li> <li> <label>璁稿彲璇�:</label> - <span>{{activedSdkOrApp.licence}}</span> + <span>{{ activedSdkOrApp.licence }}</span> </li> <!-- <li> <label>璁惧ID:</label> @@ -409,7 +534,9 @@ </li>--> </ul> <div class="text-right"> - <el-button type="primary" @click="checkMyAlgorith">纭畾</el-button> + <el-button type="primary" @click="checkMyAlgorith" + >纭畾</el-button + > <p class="tip">鎻愮ず锛氳鍦ㄢ�滄垜鐨勭畻娉曗�濅腑鏌ョ湅骞跺畨瑁呯畻娉�</p> </div> </div> @@ -418,59 +545,93 @@ </el-tab-pane> <el-tab-pane name="update"> <span slot="label"> - <el-badge class="update-badge" :value="updateNum">鏇存柊</el-badge> + <el-badge class="update-badge" :value="updateNum" + >鏇存柊</el-badge + > </span> <div class="task-list"> <div class="flex-title"> <p class="src-title">绠楁硶杞欢</p> - <el-button @click="batchUpdate('sdk')" size="mini" type="primary">鏇存柊鍏ㄩ儴</el-button> + <el-button + @click="batchUpdate('sdk')" + size="mini" + type="primary" + >鏇存柊鍏ㄩ儴</el-button + > </div> <div class="flex-list"> - <div v-if="!hasNewVersionSdk.length" class="empty-tip">鏆傛棤鏁版嵁锛岃绋嶅悗閲嶈瘯...</div> - <div class="wrap-box" v-for="item in hasNewVersionSdk" :key="item.id"> + <div v-if="!hasNewVersionSdk.length" class="empty-tip"> + 鏆傛棤鏁版嵁锛岃绋嶅悗閲嶈瘯... + </div> + <div + class="wrap-box" + v-for="item in hasNewVersionSdk" + :key="item.id" + > <div class="list-choose-item-left"> <div class="list-complete-item-handle"> <div class="svg-wrap" - :class="{willUpGrade:item.isUpgrade}" + :class="{ willUpGrade: item.isUpgrade }" v-loading="item.upgradeLoading" :element-loading-text="item.progressMsg" element-loading-background="rgba(0,0,0,.8)" > - <i class="iconfont iconupdate" v-if="item.isUpgrade"></i> - <div class="mask" v-if="!item.isDefault || item.isUpgrade"> + <i + class="iconfont iconupdate" + v-if="item.isUpgrade" + ></i> + <div + class="mask" + v-if="!item.isDefault || item.isUpgrade" + > <div class="left-top"> - <div>褰撳墠鐗堟湰:{{item.version}}</div> - <div v-if="item.remoteVersion">鏈�鏂扮増鏈�:{{item.remoteVersion}}</div> + <div>褰撳墠鐗堟湰:{{ item.version }}</div> + <div v-if="item.remoteVersion"> + 鏈�鏂扮増鏈�:{{ item.remoteVersion }} + </div> </div> - <div class="info-onmask" @click="checkDetail(item)">鏌ョ湅璇︽儏</div> + <div + class="info-onmask" + @click="checkDetail(item)" + > + 鏌ョ湅璇︽儏 + </div> <div class="mask-btn"> <el-button @click="unLoadSdk(item)" type="primary" size="small" class="bot-btn" - >鍗歌浇</el-button> + >鍗歌浇</el-button + > <el-button v-if="item.isUpgrade" @click="donwload(item)" type="warning" size="small" class="bot-btn" - >鍗囩骇</el-button> + >鍗囩骇</el-button + > </div> </div> <img v-if="item.iconBlob" class="baseImg" - :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`" + :src=" + item.iconBlob.indexOf(',') > 0 + ? item.iconBlob + : `data:image/png;base64,${item.iconBlob}` + " alt /> <img v-else class="baseImg" :src="item.icon" alt /> </div> <div class="alg-name"> - <div style="padding:0px 10px 0px 10px;"> - <span v-if="!item.isEdit">{{ item.sdk_name}}</span> + <div style="padding: 0px 10px 0px 10px"> + <span v-if="!item.isEdit">{{ + item.sdk_name + }}</span> </div> </div> </div> @@ -479,27 +640,50 @@ </div> <div class="flex-title"> <p class="src-title">搴旂敤杞欢</p> - <el-button @click="batchUpdate('app')" type="primary" size="mini">鏇存柊鍏ㄩ儴</el-button> + <el-button + @click="batchUpdate('app')" + type="primary" + size="mini" + >鏇存柊鍏ㄩ儴</el-button + > </div> <div class="flex-list"> - <div v-if="!hasNewVersionApp.length" class="empty-tip">鏆傛棤鏁版嵁锛岃绋嶅悗閲嶈瘯...</div> - <div class="wrap-box" v-for="item in hasNewVersionApp" :key="item.id"> + <div v-if="!hasNewVersionApp.length" class="empty-tip"> + 鏆傛棤鏁版嵁锛岃绋嶅悗閲嶈瘯... + </div> + <div + class="wrap-box" + v-for="item in hasNewVersionApp" + :key="item.id" + > <div class="list-choose-item-left"> <div class="list-complete-item-handle"> <div class="svg-wrap" - :class="{willUpGrade:item.isUpgrade}" - v-loading="item.unloadLoading||item.upgradeLoading" + :class="{ willUpGrade: item.isUpgrade }" + v-loading=" + item.unloadLoading || item.upgradeLoading + " :element-loading-text="item.progressMsg" element-loading-background="rgba(0,0,0,.8)" > - <i class="iconfont iconupdate" v-if="item.isUpgrade"></i> + <i + class="iconfont iconupdate" + v-if="item.isUpgrade" + ></i> <div class="mask"> <div class="left-top"> - <div>褰撳墠鐗堟湰:{{item.version}}</div> - <div v-if="item.remoteVersion">鏈�鏂扮増鏈�:{{item.remoteVersion}}</div> + <div>褰撳墠鐗堟湰:{{ item.version }}</div> + <div v-if="item.remoteVersion"> + 鏈�鏂扮増鏈�:{{ item.remoteVersion }} + </div> </div> - <div class="info-onmask" @click="checkDetail(item)">鏌ョ湅璇︽儏</div> + <div + class="info-onmask" + @click="checkDetail(item)" + > + 鏌ョ湅璇︽儏 + </div> <div class="mask-btn"> <el-button v-if="!item.isDefault" @@ -507,26 +691,32 @@ type="primary" size="small" class="bot-btn" - >鍗歌浇</el-button> + >鍗歌浇</el-button + > <el-button v-if="item.isUpgrade" - @click="downloadApp(item,'upgrade')" + @click="downloadApp(item, 'upgrade')" type="warning" size="small" class="bot-btn" - >鍗囩骇</el-button> + >鍗囩骇</el-button + > </div> </div> <img v-if="item.iconBlob" class="baseImg" - :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`" + :src=" + item.iconBlob.indexOf(',') > 0 + ? item.iconBlob + : `data:image/png;base64,${item.iconBlob}` + " alt /> <img v-else class="baseImg" :src="item.icon" alt /> </div> <div class="alg-name"> - <div style="padding:0px 10px 0px 10px;"> + <div style="padding: 0px 10px 0px 10px"> <span v-if="!item.isEdit">{{ item.name }}</span> <el-input size="small" @@ -560,15 +750,15 @@ <div> <div> <span>瀹夎鍖呭悕绉帮細</span> - <span>{{installAppPackage.productName}}</span> + <span>{{ installAppPackage.productName }}</span> </div> <div> <span>瀹夎鐗堟湰锛�</span> - <span>{{installAppPackage.version}}</span> + <span>{{ installAppPackage.version }}</span> </div> <div> <span>鏇存柊鍐呭锛�</span> - <span>{{installAppPackage.installContent}}</span> + <span>{{ installAppPackage.installContent }}</span> </div> </div> </template> @@ -576,15 +766,15 @@ <div> <div> <span>瀹夎鍖呭悕绉帮細</span> - <span>{{installSdkPackage.productName}}</span> + <span>{{ installSdkPackage.productName }}</span> </div> <div> <span>瀹夎鐗堟湰锛�</span> - <span>{{installSdkPackage.version}}</span> + <span>{{ installSdkPackage.version }}</span> </div> <div> <span>鏇存柊鍐呭锛�</span> - <span>{{installSdkPackage.installContent}}</span> + <span>{{ installSdkPackage.installContent }}</span> </div> </div> </template> @@ -599,62 +789,196 @@ <el-dialog class="product-detail-dialog" :visible="productDetailVisible" - @close="productDetailVisible=false" + @close="closeDial" > - <div class="dialog-title" slot="title">绠楁硶/搴旂敤璇︽儏</div> + <!-- <el-button-group> --> + <div class="button-group"> + <el-button plain size="small" @click="backwards" :disabled="backDisable"> < </el-button> + <!-- <el-button type="primary" size="small" icon="el-icon-arrow-left"></el-button> --> + <el-button plain size="small" @click="forwards" :disabled="forwardDisable">></el-button> + <!-- <el-button type="primary" size="small"><i class="el-icon-arrow-right el-icon--right"></i></el-button> --> + + </div> +<!-- </el-button-group> --> + <div class="dialog-title" slot="title">{{curCheckTarget.sdk_type===undefined?"搴旂敤璇︽儏":"绠楁硶璇︽儏"}}</div> <div class="dialog-content"> <div class="box-top"> <div class="top-left"> <div class="banner"> - <!-- <el-carousel + <el-carousel ref="carousel" :autoplay="false" indicator-position="none" - :arrow="curCheckTarget.pics.length > 1 ? 'always' : 'never'" + :arrow=" + productDetail.pics !== undefined + ? productDetail.pics.length > 1 + ? 'always' + : 'never' + : 'never' + " @change="changeHandle" > - <el-carousel-item v-for="(item, index) in curCheckTarget.pics" :key="index"> + <!-- :arrow="productDetail.pics.length > 1 ? 'always' : 'never'" --> + <el-carousel-item + v-for="(item, index) in productDetail.pics" + :key="index" + > <div class="imgwrap"> <img - v-if="item.type=='image'" - :src="'/httpImage/'+item.url" + v-if="item.type != 'video'" + :src="'/httpImage/' + item.url" class="cursor-pointer" preview /> - <video v-if="item.type=='video'" :src="'/httpImage/'+item.url" controls></video> + <video + v-if="item.type == 'video'" + :src="'/httpImage/' + item.url" + controls + ></video> </div> </el-carousel-item> - </el-carousel>--> + </el-carousel> </div> </div> <div class="top-right"> + <!-- <div class="title">{{curCheckTarget.sdk_name}}</div> --> <div class="summary"> - <div class="icon"></div> - <div class="name"></div> - <!-- <div class="tags"> - <span + <div class="icon"> + <img + v-if="curCheckTarget.iconBlob" + class="baseImg" + :src=" + curCheckTarget.iconBlob.indexOf(',') > 0 + ? curCheckTarget.iconBlob + : `data:image/png;base64,${curCheckTarget.iconBlob}` + " + alt + /> + </div> + <div class="right-desc"> + <div class="name">{{ productDetail.productName }}</div> + <div class="tags"> + <!-- <span class="tag" v-for="(id, index) in curCheckTarget.productLabelId" :key="index+'i'" - >{{showNameById(id)}}</span> - </div>--> - <div class="btns"> - <el-button size="mini">鍗囩骇</el-button> - <el-button size="mini">鍗歌浇</el-button> - <el-button size="mini">鎵撳紑</el-button> + >{{showNameById(id)}}</span> --> + <el-tag type="info" color="#fff">搴旂敤</el-tag> + <el-tag type="info" color="#fff">绠楁硶</el-tag> + <el-tag type="info" color="#fff">杞欢</el-tag> + <!-- <span + class="tag" + >搴旂敤</span> + <span + class="tag" + >绠楁硶</span> + <span + class="tag" + >杞欢</span> --> + </div> + <div class="btns"> + <el-button size="medium" type="warning" @click="upgrade">{{ + isUpgrading ? "鍗囩骇涓�.." : "鍗囩骇" + }}</el-button> + <el-button size="medium" type="primary" @click="unload" + >鍗歌浇</el-button + > + <el-button size="medium" type="success">鎵撳紑</el-button> + </div> </div> </div> <div class="product-intruduction"> - <div class="title">浜у搧绠�浠�</div> + <div class="part-title">绠�浠�</div> + <div class="text"> + <div class="single-desc"> + <div>鐗堟湰锛�</div> + <div> + {{ + productDetail.productVersion === "" + ? "鏆傛棤鏁版嵁" + : productDetail.productVersion + }} + </div> + </div> + <div class="single-desc"> + <div>姒傝堪锛�</div> + <div> + {{ + productDetail.description === "" + ? "鏆傛棤鏁版嵁" + : productDetail.description + }} + </div> + </div> + <div class="single-desc"> + <div>璇﹁堪锛�</div> + <div> + {{ + productDetail.summary === "" + ? "鏆傛棤鏁版嵁" + : productDetail.summary + }} + </div> + </div> + </div> </div> </div> </div> - <div class="box-bot"> + <div class="box-bottom"> <div class="bot-left"> <div class="part-title">鍔熻兘鐗圭偣</div> + <div class="list-zone"> + <div + class="list-item" + v-for="(item, index) in productDetail.funcInfo" + :key="index" + > + <el-tag type="" size="small" effect="dark"> + {{ item.title === "" ? "鏍囬鏆傛棤鏁版嵁" : item.title }} + </el-tag> + <div class="desc"> + {{ + item.desc === "" + ? "璇ユ绱㈤噰鐢ㄥぇ鏁版嵁鏋舵瀯锛屽垎甯冨紡鏁版嵁澶勭悊锛屽彲鏀寔娴烽噺鏁版嵁澶嶆潅妫�绱㈡绉掔骇杩斿洖锛岃璁℃湁鏅鸿兘妫�绱㈡锛屾悳绱㈠唴瀹瑰皢鏍规嵁TF/IDF绠楁硶璁$畻鎵�寰楀緱鍒嗭紝璇ョ畻娉曢�氳繃姝ゅ唴瀹瑰尮閰嶇▼搴︼紝璇嶉鏁帮紝璇嶉暱鍗犳瘮绛夛紝璁$畻鍑哄悓鎵�鎼滃唴瀹圭殑绗﹀悎搴︼紝杩斿洖绗﹀悎搴︽渶楂樼殑鏁版嵁锛岃嫢绗﹀悎搴︿竴鑷达紝灏嗚繑鍥炴嵁浠婃渶杩戠殑鏁版嵁" + : item.desc + }} + </div> + </div> + </div> </div> <div class="bot-right"> <div class="part-title">鎺ㄨ崘绠楁硶</div> + <div class="item-zone"> + <div + class="item" + v-for="(item, index) in otherProducts" + :key="index" + > + <el-tag type="info" color="inherit" size="small">{{ + item.productTypeName === "" + ? "鏆傛棤鏁版嵁" + : item.productTypeName + }}</el-tag> + <div class="icon"> + <img + v-if="item.iconBlob" + class="baseImg" + :src=" + item.iconBlob.indexOf(',') > 0 + ? item.iconBlob + : `data:image/png;base64,${item.iconBlob}` + " + alt + /> + <div class="icon-name"> + {{ item.name === "" ? "鏆傛棤鏁版嵁" : item.name }} + </div> + </div> + <div class="look-button"> + <el-button type="primary" size="small" @click="checkInWindow(item)">鏌ョ湅</el-button> + </div> + </div> + </div> </div> </div> </div> @@ -662,20 +986,34 @@ </div> </template> <script> - -import { findAllSdk, downloadSdk, installSdk, getInstallInfo, removeSdk } from "./api"; -import { getApps, installApp, removeApp, getUnActivedSdk, actPageAlg, getUnActivedApp, actApp } from "@/api/app"; +import { + findAllSdk, + downloadSdk, + installSdk, + getInstallInfo, + removeSdk, +} from "./api"; +import { + getApps, + installApp, + getAppDetail, + removeApp, + getUnActivedSdk, + actPageAlg, + getUnActivedApp, + actApp, +} from "@/api/app"; import FileUploader from "@/components/subComponents/FileUpload/index"; export default { name: "algorithmManage", props: {}, components: { - FileUploader + FileUploader, }, computed: { - updateNum () { - return this.hasNewVersionApp.length + this.hasNewVersionSdk.length + updateNum() { + return this.hasNewVersionApp.length + this.hasNewVersionSdk.length; }, // notInstalledList () { // return this.sdkList.filter(sdk => { @@ -697,7 +1035,7 @@ // }); // return arr; // }, - isAdmin () { + isAdmin() { if ( sessionStorage.getItem("userInfo") && sessionStorage.getItem("userInfo") !== "" @@ -709,7 +1047,7 @@ return false; }, }, - data () { + data() { return { sdkList: [], installedList: [], @@ -734,15 +1072,15 @@ unActivedSDKList: [], unActivedAppList: [], //actSdkId: '', - actType: '', - actId: '', + actType: "", + actId: "", activedSdkOrApp: { - activateCode: '', - productName: '', - setting: '', - expireTime: '', - licence: '', - devIds: '' + activateCode: "", + productName: "", + setting: "", + expireTime: "", + licence: "", + devIds: "", }, // unloadLoading: false, // installLoading: false, @@ -755,135 +1093,231 @@ autoRefresh: true, curCheckTarget: {}, productDetailVisible: false, - } + isUpgrading: false, + productDetail: {}, + otherProducts: [], + backStack: [], + forwardStack: [], + backDisable:true, + forwardDisable:true, + }; }, directives: { focus: { inserted: function (el) { el.querySelector("input").focus(); - } - } + }, + }, }, - mounted () { + mounted() { // 鑾峰彇鎵�鏈夊簲鐢� this.autoRefreshAppAndSdkState(); this.getUnActivedList(); this.getUnActivedAppList(); }, - beforeDestroy () { + beforeDestroy() { this.autoRefresh = false; }, methods: { - isShow (authority) { - return this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1 + isShow(authority) { + return ( + this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1 + ); }, - batchUpdate (type) { + batchUpdate(type) { if (type == "sdk") { - this.hasNewVersionSdk.forEach(sdk => { - this.donwload(sdk) - }) + this.hasNewVersionSdk.forEach((sdk) => { + this.donwload(sdk); + }); } else { - this.hasNewVersionApp.forEach(app => { - this.downloadApp(app, 'upgrade') - }) + this.hasNewVersionApp.forEach((app) => { + this.downloadApp(app, "upgrade"); + }); } }, - checkDetail (item) { + closeDial(){ + this.productDetailVisible = false + this.productDetail = {} + this.otherProducts = [] + }, + checkDetail(item) { + this.resetStack() this.curCheckTarget = item; - debugger + // debugger this.productDetailVisible = true; + let _this = this; + getAppDetail({ id: item.id }).then((res) => { + _this.productDetail = res.data.detail; + _this.otherProducts = res.data.randoms; + + }); + }, + resetStack(){ + this.forwardStack = [] + this.backStack = [] + this.backDisable = true + this.forwardDisable = true + + }, + checkInWindow(item){ + this.backStack.push(this.productDetail) + console.log(this.backStack); + this.backDisable = false + this.curCheckTarget = item; + // this.productDetailVisible = true; + let _this = this; + getAppDetail({ id: item.id }).then((res) => { + _this.productDetail = res.data.detail; + _this.otherProducts = res.data.randoms; + }); + }, + backwards(){ + if (this.backStack.length ==0) { + this.backDisable = true + // forwardDisable:false, + return + } + console.log(this.backStack); + + // debugger + this.forwardStack.push(this.productDetail) + this.productDetail = this.backStack.pop() + this.forwardDisable=false + if (this.backStack.length ==0) { + this.backDisable = true + + } + }, + forwards(){ + if(this.forwardStack.length==0){ + this.forwardDisable=true + return + } + // debugger + console.log(this.backStack); + + this.backStack.push(this.productDetail) + this.backDisable=false + this.productDetail=this.forwardStack.pop() + if (this.forwardStack.length==0) { + this.forwardDisable=true + } + }, //绂荤嚎瀹夎 - offlineInstall () { + offlineInstall() { this.installDialogVisible = false; this.isInstall = true; //瀹夎 - installSdk(this.installFile).then(res => { - if (res.success) { + installSdk(this.installFile) + .then((res) => { + if (res.success) { + this.isInstall = false; + this.$message({ + type: "success", + message: '瀹夎鎴愬姛,灏嗚烦杞嚦"宸叉縺娲�"涓煡鐪�', + }); + setTimeout(() => { + this.getAllSdk(); + window.parent.postMessage( + { + msg: "AppUpdate", + }, + "*" + ); + this.activeName = "myAlgorithm"; + }, 3000); + } + }) + .catch((e) => { + console.log(e); this.isInstall = false; this.$message({ - type: 'success', - message: '瀹夎鎴愬姛,灏嗚烦杞嚦"宸叉縺娲�"涓煡鐪�' + type: "error", + message: e.data, }); - setTimeout(() => { - this.getAllSdk(); - window.parent.postMessage({ - msg: "AppUpdate" - }, '*') - this.activeName = 'myAlgorithm'; - }, 3000); - } - - }).catch(e => { - console.log(e) - this.isInstall = false; - this.$message({ - type: 'error', - message: e.data }); - }) }, - downloadApp (app, action) { - if (action == 'upgrade') { + upgrade() { + this.isUpgrading = !this.isUpgrading; + setTimeout(() => { + this.$notify({ + title: "鎴愬姛", + message: "鍗囩骇瀹屾垚", + type: "success", + }); + this.isUpgrading = !this.isUpgrading; + }, 1200); + }, + downloadApp(app, action) { + if (action == "upgrade") { app.upgradeLoading = true; } else { app.installLoading = true; } let _this = this; - installApp({ path: app.id }).then(res => { - if (res && res.success) { - setTimeout(() => { - if (action == 'upgrade') { - app.upgradeLoading = false; - // _this.$notify({ - // type: 'success', - // message: '鍗囩骇鎴愬姛' - // }); - } else { - app.installLoading = false; - // _this.$notify({ - // type: 'success', - // message: '瀹夎鎴愬姛' - // }); - } - // _this.getAllApps(); - window.parent.postMessage({ - msg: "AppUpdate" - }, '*') - }, 3000); - } - }).catch(e => { - console.log(e); - if (action == 'upgrade') { - app.upgradeLoading = false; - } else { - app.installLoading = false; - } - }) + installApp({ path: app.id }) + .then((res) => { + if (res && res.success) { + setTimeout(() => { + if (action == "upgrade") { + app.upgradeLoading = false; + // _this.$notify({ + // type: 'success', + // message: '鍗囩骇鎴愬姛' + // }); + } else { + app.installLoading = false; + // _this.$notify({ + // type: 'success', + // message: '瀹夎鎴愬姛' + // }); + } + // _this.getAllApps(); + window.parent.postMessage( + { + msg: "AppUpdate", + }, + "*" + ); + }, 3000); + } + }) + .catch((e) => { + console.log(e); + if (action == "upgrade") { + app.upgradeLoading = false; + } else { + app.installLoading = false; + } + }); // 寮�鍚嚜鍔ㄥ埛鏂� this.appUpgreading = true; }, - async getAllApps () { - let iArry = [] - let sArry = [] - let nArry = [] + async getAllApps() { + let iArry = []; + let sArry = []; + let nArry = []; let rsp = await getApps(); if (rsp && rsp.success) { // 閬嶅巻app鐨勮繃绋嬮噸缃� this.appUpgreading = false; - rsp.data.forEach(item => { - let obj = Object.assign({ unloadLoading: false, upgradeLoading: false }, item) + rsp.data.forEach((item) => { + let obj = Object.assign( + { unloadLoading: false, upgradeLoading: false }, + item + ); if (obj.progressMsg !== "" && obj.progressMsg !== "宸插畨瑁�") { obj.upgradeLoading = true; this.appUpgreading = true; } item.installed ? iArry.push(obj) : sArry.push(obj); - item.isUpgrade && nArry.push(obj) + item.isUpgrade && nArry.push(obj); }); } this.installedApps = iArry; @@ -891,46 +1325,60 @@ this.hasNewVersionApp = nArry; }, //鍗歌浇绠楁硶 - unLoadSdk (sdk) { + unLoadSdk(sdk) { let _this = this; - this.$confirm('纭畾瑕佸嵏杞借绠楁硶鍚�?', '鎻愮ず').then(() => { - sdk.unloadLoading = true; - removeSdk({ sdkId: sdk.id }).then(res => { - if (res && res.success) { - sdk.unloadLoading = false; - _this.getAllSdk(); - window.parent.postMessage({ - msg: "AppUpdate" - }, '*') - } - }).catch(e => { - console.log(e); - sdk.unloadLoading = false; + this.$confirm("纭畾瑕佸嵏杞借绠楁硶鍚�?", "鎻愮ず") + .then(() => { + sdk.unloadLoading = true; + removeSdk({ sdkId: sdk.id }) + .then((res) => { + if (res && res.success) { + sdk.unloadLoading = false; + _this.getAllSdk(); + window.parent.postMessage( + { + msg: "AppUpdate", + }, + "*" + ); + } + }) + .catch((e) => { + console.log(e); + sdk.unloadLoading = false; + }); }) - }).catch(e => { - console.log(e) - }) + .catch((e) => { + console.log(e); + }); }, //鍗歌浇搴旂敤 - unLoad (app) { + unLoad(app) { let _this = this; - this.$confirm('纭畾瑕佸嵏杞借搴旂敤鍚�?', '鎻愮ず').then(() => { - app.unloadLoading = true; - removeApp({ appId: app.id }).then(res => { - if (res && res.success) { - app.unloadLoading = false; - _this.getAllApps(); - window.parent.postMessage({ - msg: "AppUpdate" - }, '*') - } - }).catch(e => { - console.log(e); - app.unloadLoading = false; + this.$confirm("纭畾瑕佸嵏杞借搴旂敤鍚�?", "鎻愮ず") + .then(() => { + app.unloadLoading = true; + removeApp({ appId: app.id }) + .then((res) => { + if (res && res.success) { + app.unloadLoading = false; + _this.getAllApps(); + window.parent.postMessage( + { + msg: "AppUpdate", + }, + "*" + ); + } + }) + .catch((e) => { + console.log(e); + app.unloadLoading = false; + }); }) - }).catch(e => { - console.log(e) - }) + .catch((e) => { + console.log(e); + }); }, // actSdk (id) { // this.actSdkId = id; @@ -939,124 +1387,147 @@ // this.activeCode = ''; // this.activedSdkOrApp = this.newActInfo() // }, - actSdkOrApp (id, type = 'sdk') { + actSdkOrApp(id, type = "sdk") { this.actType = type; this.actId = id; this.actDrawerShow = true; this.actStep = 0; - this.activeCode = ''; - this.activedSdkOrApp = this.newActInfo() + this.activeCode = ""; + this.activedSdkOrApp = this.newActInfo(); }, - newActInfo () { + newActInfo() { return { - activateCode: '', - productName: '', - setting: '', - expireTime: '', - licence: '', - devIds: '' - } + activateCode: "", + productName: "", + setting: "", + expireTime: "", + licence: "", + devIds: "", + }; }, - getUnActivedList () { - getUnActivedSdk().then(res => { + getUnActivedList() { + getUnActivedSdk().then((res) => { if (res.code == 200) { this.unActivedSDKList = res.data; } - }) - + }); }, - getUnActivedAppList () { - getUnActivedApp().then(res => { + getUnActivedAppList() { + getUnActivedApp().then((res) => { if (res.code == 200) { this.unActivedAppList = res.data; } }); }, - actived () { + actived() { let _this = this; - if (this.actType == 'sdk') { + if (this.actType == "sdk") { //婵�娲荤畻娉� - actPageAlg(this.actId, this.activeCode).then(res => { - if (res.data.isSuccess) { - _this.activedSdkOrApp = res.data.successMsg; - _this.actStep++; - _this.getUnActivedList(); - _this.getAllSdk(); - } else { - _this.$notify({ - type: 'error', - message: res.data.failMsg.failMsg - }); - } - }).catch(e => { - console.log(e) - }); - } else if (this.actType == 'app') { + actPageAlg(this.actId, this.activeCode) + .then((res) => { + if (res.data.isSuccess) { + _this.activedSdkOrApp = res.data.successMsg; + _this.actStep++; + _this.getUnActivedList(); + _this.getAllSdk(); + } else { + _this.$notify({ + type: "error", + message: res.data.failMsg.failMsg, + }); + } + }) + .catch((e) => { + console.log(e); + }); + } else if (this.actType == "app") { //婵�娲诲簲鐢� - actApp(this.actId, this.activeCode).then(res => { - if (res.data.isSuccess) { - _this.activedSdkOrApp = res.data.successMsg; - _this.actStep++; - _this.getUnActivedAppList(); - _this.getAllApps(); - } else { - _this.$notify({ - type: 'error', - message: res.data.failMsg.failMsg - }); - } - }).catch(e => { - console.log(e) - }); + actApp(this.actId, this.activeCode) + .then((res) => { + if (res.data.isSuccess) { + _this.activedSdkOrApp = res.data.successMsg; + _this.actStep++; + _this.getUnActivedAppList(); + _this.getAllApps(); + } 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; const h = this.$createElement; //涓婁紶瀹屾垚鑾峰彇瀹夎淇℃伅 let _this = this; - getInstallInfo(file).then(res => { - _this.installFile = file; - if (res.success) { - _this.installDialogVisible = true; - if (res.data.apps.length > 0) { - _this.installAppPackage = { - appId: res.data.apps[0].appId, - version: res.data.apps[0].version, - productName: res.data.productName, - installContent: res.data.apps[0].installContent + getInstallInfo(file) + .then((res) => { + _this.installFile = file; + if (res.success) { + _this.installDialogVisible = true; + if (res.data.apps.length > 0) { + _this.installAppPackage = { + appId: res.data.apps[0].appId, + version: res.data.apps[0].version, + productName: res.data.productName, + installContent: res.data.apps[0].installContent, + }; + } + if (res.data.sdks.length > 0) { + _this.installSdkPackage = { + appId: res.data.sdks[0].sdkId, + version: res.data.sdks[0].version, + productName: res.data.productName, + installContent: res.data.sdks[0].installContent, + }; } } - if (res.data.sdks.length > 0) { - _this.installSdkPackage = { - appId: res.data.sdks[0].sdkId, - version: res.data.sdks[0].version, - productName: res.data.productName, - installContent: res.data.sdks[0].installContent - } - } - } - }).catch(e => { - this.$message({ - type: 'error', - message: e.data + }) + .catch((e) => { + this.$message({ + type: "error", + message: e.data, + }); }); + }, + unload() { + this.$confirm("纭畾瑕佸嵏杞借绠楁硶涔堬紵", "鎻愮ず", { + confirmButtonText: "纭畾", + cancelButtonText: "鍙栨秷", + type: "warning", }) - + .then(() => { + this.$message({ + type: "success", + message: "鍗歌浇鎴愬姛!", + }); + }) + .catch(() => { + // this.$message({ + // type: 'info', + // message: '宸插彇娑堝嵏杞�' + // }); + }); }, - onFileAdded (f) { + onFileAdded(f) { this.patchUpdateStatus = ""; }, - async getAllSdk () { + async getAllSdk() { let installedList = []; let unInstalledList = []; let hasNewVersionList = []; @@ -1064,8 +1535,11 @@ if (res && res.success) { this.sdkUpgreading = false; - res.data.forEach(item => { - let obj = Object.assign({ unloadLoading: false, upgradeLoading: false }, item) + res.data.forEach((item) => { + let obj = Object.assign( + { unloadLoading: false, upgradeLoading: false }, + item + ); if (obj.progressMsg !== "" && obj.progressMsg !== "宸插畨瑁�") { obj.upgradeLoading = true; @@ -1073,8 +1547,7 @@ } //绠楁硶杞欢 宸插畨瑁呭叾涓寘鍚緟鍗囩骇 鏈畨瑁� - item.installed ? installedList.push(obj) : unInstalledList.push(obj) - + item.installed ? installedList.push(obj) : unInstalledList.push(obj); }); } this.installedList = installedList; @@ -1082,13 +1555,13 @@ this.hasNewVersionSdk = hasNewVersionList; }, - donwload (item) { + donwload(item) { item.upgradeLoading = true; //this.downloading = true; this.downloadItem = item.id; downloadSdk({ path: item.id }) - .then(rsp => { + .then((rsp) => { // this.$notify({ // type: "success", // message: "绠楁硶宸插畨瑁�" @@ -1097,10 +1570,10 @@ //this.downloading = false; this.downloadItem = ""; }) - .catch(err => { + .catch((err) => { this.$notify({ type: "warning", - message: err.data + message: err.data, }); item.upgradeLoading = false; //this.downloading = false; @@ -1109,14 +1582,12 @@ // 寮�鍚嚜鍔ㄥ埛鏂� this.sdkUpgreading = true; }, - inputBlur (item) { + inputBlur(item) { // console.log(item, '淇敼鍚嶇О') this.$set(item, "isEdit", false); }, - handleTabClick () { - - }, - autoRefreshAppAndSdkState () { + handleTabClick() {}, + autoRefreshAppAndSdkState() { // 鍏抽棴鍚庨��鍑� if (!this.autoRefresh) { return; @@ -1130,12 +1601,12 @@ this.getAllSdk(); } - let _this = this + let _this = this; setTimeout(() => { _this.autoRefreshAppAndSdkState(); - }, 500) - } - } + }, 500); + }, + }, }; </script> <style lang="scss"> @@ -1172,13 +1643,211 @@ height: 100%; } .product-detail-dialog { + .dialog-title{ + font-size: 14px; + } + .el-dialog { + width: 60%; + min-width: 920px; + position: relative; + } .el-dialog__header { text-align: center; + padding: 15px; } + .el-dialog__body { + background-color: rgba(222, 225, 230, 1); + padding: 10px 5px; + .button-group{ + position: absolute; + top: 9px; + left:6px; + left: 10px; + + button{ + // margin-right: 6px; + background-color: #ecf5ff; + font-size: 18px; + line-height: 12px; + } + } + } + .dialog-content { .box-top { + height: 380px; + .top-left { + float: left; + width: 55%; + background-color: rgba(253, 253, 253, 1); + margin: 0 0.5%; + height: 380px; + .banner { + text-align: center; + margin-top: 30px; + video { + + margin: 20px auto; + width: 443px; + height: 277px; + // background: aquamarine; + } + } + } + .top-right { + float: left; + width: 43%; + margin: 0 0.5%; + // background-color: lightgoldenrodyellow; + height: 380px; + background-color: rgba(253, 253, 253, 1); + position: relative; + .summary { + height: 140px; + margin: 5px; + .icon { + margin: 0 5px; + margin-top: 5px; + float: left; + .baseImg{ + max-width: 128px; + max-height: 128px; + } + } + .right-desc { + float: left; + position: absolute; + left: 150px; + .name { + font-size: 30px; + // font-weight: bold; + margin-bottom: 5px; + } + .tags { + margin-bottom: 10px; + .el-tag { + margin-right: 10px; + } + } + } + } + .product-intruduction { + height: 230px; + // background-color: lightgrey; + .part-title { + display: block; + line-height: 35px; + font-size: 16px; + margin-left: 24px; + // height: 30px; + border-bottom: 3px solid #3d68e1; + width: fit-content; + margin-bottom: 8px; + height: 35px; + } + .text { + padding: 10px 15px; + .single-desc { + margin-bottom: 10px; + } + } + } + } } - .box-bot { + .box-bottom { + margin-top: 10px; + height: 260px; + .bot-left { + width: 49%; + height: 260px; + background-color: rgba(253, 253, 253, 1); + margin: 0 0.5%; + float: left; + // background-color: lightblue; + .part-title { + display: block; + line-height: 35px; + font-size: 16px; + margin-left: 24px; + // height: 30px; + border-bottom: 3px solid #3d68e1; + width: fit-content; + margin-bottom: 8px; + height: 35px; + } + .list-zone { + overflow: auto; + height: 225px; + padding: 0 8px; + .list-item { + .desc { + background-color: rgba(242, 242, 242, 1.3); + } + } + } + } + .bot-right { + height: 260px; + float: left; + background-color: rgba(253, 253, 253, 1); + width: 49%; + // background-color: lightgoldenrodyellow; + margin: 0 0.5%; + + .part-title { + display: block; + line-height: 35px; + font-size: 16px; + margin-left: 24px; + // height: 30px; + border-bottom: 3px solid #3d68e1; + width: fit-content; + margin-bottom: 5px; + height: 35px; + } + .item-zone { + overflow: auto; + height: 225px; + padding: 0 10px; + .item { + height: 165px; + width: 130px; + float: left; + // text-align: center; + border-radius: 10px; + box-shadow: 0px 5px 14px rgba(0, 0, 0, 0.0666666666666667); + position: relative; + + .el-tag { + float: right; + margin: 8px; + } + .icon { + // width: 100%; + // height: 68px; + // width: 68px; + position: absolute; + // margin: 0 auto; + margin: 0 auto; + top: 21%; + left: 26%; + img { + // display: block; + max-width: 60px; + max-height: 60px; + } + .icon-name { + text-align: center; + } + } + .look-button { + position: absolute; + left: 28%; + top: 75%; + } + } + } + } } } } @@ -1219,7 +1888,7 @@ .src-title { //color: #bfbfbf; color: #bbcee8; - font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC'; + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC"; font-weight: 650; font-style: normal; height: 36px; @@ -1252,7 +1921,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 { @@ -1415,16 +2084,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%; -- Gitblit v1.8.0