From 44a3abe105e9b9b4d1a7173772fc9d18c9b59529 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期六, 18 九月 2021 16:24:02 +0800
Subject: [PATCH] 应用中心ui改动
---
src/pages/ai/index/App.vue | 856 +++++++++++++++++++++++++++++---------------------------
1 files changed, 438 insertions(+), 418 deletions(-)
diff --git a/src/pages/ai/index/App.vue b/src/pages/ai/index/App.vue
index 324e7a1..a4ea71c 100644
--- a/src/pages/ai/index/App.vue
+++ b/src/pages/ai/index/App.vue
@@ -19,15 +19,11 @@
@click="pickMenu(name)"
>
{{ name }}
- <el-badge
- v-if="index == 3"
- class="update-badge"
- :value="updateNum"
- :hidden="updateNum == 0"
- ></el-badge>
+ <sup v-if="index == 3 && updateNum != 0">{{ updateNum }}</sup>
</div>
</div>
<div class="nav-box-search">
+ <span class="icon iconfont all-scene"></span>
<el-input
placeholder="鎼滅储"
v-model="input3"
@@ -37,53 +33,71 @@
<el-select
v-model="select"
slot="append"
- placeholder="鎵�鏈夊満鏅�"
+ placeholder="閫夋嫨鍦烘櫙"
+ :popper-append-to-body="false"
>
- <el-option label="閾佽矾鍦烘櫙" value="1"></el-option>
- <el-option label="瀹夊叏鍦烘櫙" value="2"></el-option>
- <el-option label="閫氱敤鍦烘櫙" value="3"></el-option>
- <el-option label="鏍″洯鍥尯" value="4"></el-option>
+ <el-option label="閾佽矾鍦烘櫙" value="1">
+ <span class="icon iconfont"></span>
+ <span>閾佽矾鍦烘櫙</span>
+ </el-option>
+ <el-option label="瀹夊叏鍦烘櫙" value="2">
+ <span class="icon iconfont"></span>
+ <span>瀹夊叏鍦烘櫙</span>
+ </el-option>
+ <el-option label="閫氱敤鍦烘櫙" value="3">
+ <span class="icon iconfont"></span>
+ <span>閫氱敤鍦烘櫙</span>
+ </el-option>
+ <el-option label="鏍″洯鍥尯" value="4">
+ <span class="icon iconfont"></span>
+ <span>鏍″洯鍥尯</span>
+ </el-option>
</el-select>
</el-input>
</div>
<div class="bg-img-wrap">
- <img src="/images/appCenter/app-banner.jpg" alt="" />
+ <img src="/images/appCenter/Group-112.png" alt="" />
</div>
</div>
<div class="quick-path" v-if="showQuickPath">
- <div
- class="quick-item"
- v-for="(item, index) in recomandUpdateList"
- :key="index"
- @click="checkDetail(item, 'active')"
- >
- <div class="icon-img">
- <img
- v-if="item.iconBlob"
- :src="
- item.iconBlob.indexOf(',') > 0
- ? item.iconBlob
- : `data:image/png;base64,${item.iconBlob}`
- "
- alt
- />
- <img v-else :src="item.icon" alt />
- </div>
- <div class="desc">
- <div class="desc-1">{{ item.sdk_name || item.name }}</div>
- <div class="desc-2">鐗堟湰 {{ item.version }}</div>
- </div>
- <div class="right-icon">
- <span class="icon iconfont"></span>
+ <div class="left-items">
+ <div
+ class="quick-item"
+ v-for="(item, index) in recomandUpdateList"
+ :key="index"
+ @click="checkDetail(item, 'inactive')"
+ >
+ <div class="icon-img">
+ <span class="icon iconfont" v-if="item.isUpgrade"
+ ></span
+ >
+ <img
+ v-if="item.iconBlob"
+ :src="
+ item.iconBlob.indexOf(',') > 0
+ ? item.iconBlob
+ : `data:image/png;base64,${item.iconBlob}`
+ "
+ alt
+ />
+ <img v-else :src="item.icon" alt />
+ </div>
+ <div class="desc">
+ <div class="desc-1">{{ item.sdk_name || item.name }}</div>
+ <div class="desc-2">鐗堟湰 {{ item.version }}</div>
+ </div>
+ <div class="right-icon">
+ <span class="icon iconfont"></span>
+ </div>
</div>
</div>
- <div class="down-all-btn">
+ <!-- <div class="down-all-btn">
<el-button plain size="small" @click="batchUpdate('both')" round
>鍏ㄩ儴鏇存柊</el-button
>
- </div>
+ </div> -->
</div>
<div class="main-content">
@@ -119,7 +133,10 @@
>
</div>
</div>
- <div class="front-page-items" v-if="activeName != '绂荤嚎鍗囩骇/瀹夎'">
+ <div
+ class="front-page-items"
+ v-if="activeName != '绂荤嚎鍗囩骇/瀹夎'"
+ >
<div
class="front-page-item"
v-for="(item, index) in tempList"
@@ -127,6 +144,9 @@
@click="checkDetail(item)"
>
<div class="icon-img">
+ <span class="icon iconfont" v-if="item.isUpgrade"
+ ></span
+ >
<img
v-if="item.iconBlob"
:src="
@@ -146,6 +166,7 @@
<el-button
size="small"
type="primary"
+ class="other-btn"
round
@click="checkDetail(item)"
v-if="activeName == '搴旂敤涓績'"
@@ -154,19 +175,23 @@
<el-button
size="small"
type="primary"
+ class="check-btn"
round
v-if="
activeName == '宸叉縺娲�' &&
- (activeTab == 'sdk' ||
- (activeTab == 'app' && !item.isDefault))
+ ((activeTab == 'sdk' && !item.isUpgrade) ||
+ (activeTab == 'app' &&
+ !item.isUpgrade &&
+ !item.isDefault))
"
- @click.stop="unLoadSdkOrApp(item)"
- >鍗歌浇</el-button
+ >鏌ョ湅</el-button
>
+ <!-- @click.stop="unLoadSdkOrApp(item)" -->
<el-button
size="small"
type="primary"
+ class="check-btn"
round
v-if="
activeName == '宸叉縺娲�' &&
@@ -179,6 +204,7 @@
<el-button
size="small"
type="primary"
+ class="other-btn"
round
v-if="
activeName == '宸叉縺娲�' &&
@@ -188,6 +214,58 @@
"
>鍗囩骇</el-button
>
+ <el-button
+ size="small"
+ type="primary"
+ class="update-btn"
+ round
+ @click.stop="donwloadSDK(item)"
+ v-if="
+ (activeName == '鏇存柊' || activeName == '宸叉縺娲�') &&
+ activeTab == 'sdk' &&
+ item.isUpgrade &&
+ !item.upgradeLoading
+ "
+ >鏇存柊</el-button
+ >
+ <span
+ class="icon iconfont rocket-icon"
+ v-if="
+ activeName == '鏇存柊' &&
+ item.isUpgrade &&
+ item.upgradeLoading &&
+ rocketIf
+ "
+ ></span
+ >
+ <span
+ class="icon iconfont rocket-icon"
+ v-if="
+ activeName == '鏇存柊' &&
+ item.isUpgrade &&
+ item.upgradeLoading &&
+ !rocketIf
+ "
+ ></span
+ >
+ <el-button
+ size="small"
+ type="primary"
+ class="update-btn"
+ round
+ @click.stop="downloadApp(item, 'upgrade')"
+ v-if="
+ (activeName == '鏇存柊' || activeName == '宸叉縺娲�') &&
+ activeTab == 'app' &&
+ item.isUpgrade &&
+ !item.upgradeLoading
+ "
+ >鏇存柊</el-button
+ >
+
+ <div class="status">
+ {{ item.progressMsg }}
+ </div>
</div>
</div>
@@ -195,6 +273,7 @@
class="front-page-item item-dimmed"
v-for="(item, index) in tempDarkList"
:key="index"
+ @click="checkDetail(item, 'activeNotInstall')"
>
<div class="icon-img">
<img
@@ -216,31 +295,55 @@
<el-button
size="small"
type="primary"
+ class="other-btn"
round
- @click="donwload(item)"
+ v-if="activeTab == 'sdk' && !item.upgradeLoading"
+ @click.stop="donwloadSDK(item)"
>瀹夎</el-button
>
+ <el-button
+ size="small"
+ type="primary"
+ class="other-btn"
+ round
+ v-if="activeTab == 'app' && !item.upgradeLoading"
+ @click.stop="downloadApp(item)"
+ >瀹夎</el-button
+ >
+ <div class="spin-icon">
+ <span
+ class="icon iconfont anz-font"
+ v-if="item.upgradeLoading"
+ ></span
+ >
+ </div>
+ <div class="status">
+ {{ item.progressMsg }}
+ </div>
</div>
</div>
</div>
- <div class="upload-pkg">
-
+ <div class="upload-pkg" v-if="activeName == '绂荤嚎鍗囩骇/瀹夎'">
<div class="upload-head">
<div class="left">
<span class="icon iconfont"></span>
<span class="txt">涓婁紶瀹夎杞欢</span>
</div>
- <div class="right">
- <span class="icon iconfont"></span>
- <span class="icon iconfont"></span>
- </div>
-
</div>
-
+ <FileUploader
+ class="upload-demo"
+ single
+ tip
+ :isDrag="true"
+ tipWords="鐐瑰嚮涓婁紶"
+ uploadPlaceholder="绠楁硶杞欢"
+ url="/data/api-v/sdk/upload"
+ @complete="onFileUpload"
+ @file-added="onFileAdded"
+ />
</div>
-
</div>
</div>
@@ -253,6 +356,53 @@
</div>
</div>
</div>
+
+ <el-dialog
+ title="瀹夎鍖呬俊鎭�"
+ :visible.sync="installDialogVisible"
+ width="40%"
+ :close-on-click-modal="false"
+ >
+ <div class="installInfo">
+ <template v-if="installAppPackage != null">
+ <div>
+ <div>
+ <span>瀹夎鍖呭悕绉帮細</span>
+ <span>{{ installAppPackage.productName }}</span>
+ </div>
+ <div>
+ <span>瀹夎鐗堟湰锛�</span>
+ <span>{{ installAppPackage.version }}</span>
+ </div>
+ <div>
+ <span>鏇存柊鍐呭锛�</span>
+ <span>{{ installAppPackage.installContent }}</span>
+ </div>
+ </div>
+ </template>
+ <template v-if="installSdkPackage != null">
+ <div>
+ <div>
+ <span>瀹夎鍖呭悕绉帮細</span>
+ <span>{{ installSdkPackage.productName }}</span>
+ </div>
+ <div>
+ <span>瀹夎鐗堟湰锛�</span>
+ <span>{{ installSdkPackage.version }}</span>
+ </div>
+ <div>
+ <span>鏇存柊鍐呭锛�</span>
+ <span>{{ installSdkPackage.installContent }}</span>
+ </div>
+ </div>
+ </template>
+ <p>纭畾瀹夎锛�</p>
+ </div>
+ <div slot="footer" class="dialog-footer">
+ <el-button @click="installDialogVisible = false">鍙� 娑�</el-button>
+ <el-button type="primary" @click="offlineInstall">瀹� 瑁�</el-button>
+ </div>
+ </el-dialog>
</div>
</template>
<script>
@@ -262,6 +412,7 @@
installSdk,
getInstallInfo,
removeSdk,
+ uploadSDK,
} from "./api";
import {
getApps,
@@ -274,7 +425,7 @@
actApp,
} from "@/api/app";
import { getUrlKey } from "@/api/utils";
-import FileUploader from "@/components/subComponents/FileUpload/index";
+import FileUploader from "../FileUpload/index";
import detailPage from "./detail";
export default {
name: "algorithmManage",
@@ -296,22 +447,17 @@
}
return false;
},
- recomandUpdateList() {
- if (this.activeTab == "sdk") {
- return this.hasNewVersionSdk.slice(0, 3);
- } else {
- return this.hasNewVersionApp.slice(0, 3);
- }
- },
},
data() {
return {
installedList: [],
+ recomandUpdateList: [],
hasNewVersionSdk: [],
activeTab: "sdk",
hasNewVersionApp: [],
tempDarkList: [],
notInstalledList: [],
+ showUpload: false,
detailType: "",
detailProductID: "",
buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
@@ -359,6 +505,7 @@
backStack: [],
toUpdateArr1: [],
forwardStack: [],
+ rocketIf: false,
backDisable: true,
forwardDisable: true,
showInputCode: false,
@@ -407,7 +554,7 @@
},
batchUpdateSDK() {
this.hasNewVersionSdk.forEach((sdk) => {
- this.donwload(sdk, 0);
+ this.donwloadSDK(sdk);
});
},
batchUpdateApp() {
@@ -458,6 +605,7 @@
this.activeTab == "sdk"
? this.hasNewVersionSdk
: this.hasNewVersionApp;
+
this.tempDarkList = [];
}
},
@@ -474,12 +622,6 @@
} else {
this.detailType = this.activeName == "搴旂敤涓績" ? "inactive" : "active";
}
- },
- resetStack() {
- this.forwardStack = [];
- this.backStack = [];
- this.backDisable = true;
- this.forwardDisable = true;
},
checkInWindow(item) {
this.backStack.push([this.productDetail, this.otherProducts]);
@@ -553,66 +695,44 @@
.then((res) => {
if (res.success) {
this.isInstall = false;
- this.$message({
- type: "success",
- message: '瀹夎鎴愬姛,灏嗚烦杞嚦"宸叉縺娲�"涓煡鐪�',
- });
+ this.$message.success('瀹夎鎴愬姛,灏嗚烦杞嚦"宸叉縺娲�"涓煡鐪�');
setTimeout(() => {
this.getAllSdk();
window.parent.postMessage({ msg: "AppUpdate" }, "*");
-
this.activeName = "宸叉縺娲�";
}, 3000);
}
})
.catch((e) => {
this.isInstall = false;
- this.$message({
- type: "error",
- message: e.data,
- });
+ this.$message.error(e.data);
});
},
downloadApp(app, action) {
- if (action == "upgrade") {
- app.upgradeLoading = true;
- } else {
- app.installLoading = true;
- }
- let _this = this;
+ let timer = null;
+ app.upgradeLoading = true;
+ timer = setInterval(() => {
+ this.rocketIf = !this.rocketIf;
+ }, 350);
+ let _this = this;
installApp({ path: app.id })
.then((res) => {
if (res && res.success) {
- _this.$notify({
- title: "鎴愬姛",
- message: "瀹夎搴旂敤鎴愬姛",
- type: "success",
- });
+ _this.$notify.success("瀹夎搴旂敤鎴愬姛");
+ clearInterval(timer);
+ app.upgradeLoading = false;
setTimeout(() => {
- if (action == "upgrade") {
- app.upgradeLoading = false;
- } else {
- app.installLoading = false;
- }
window.parent.postMessage({ msg: "AppUpdate" }, "*");
}, 3000);
} else {
}
})
.catch((e) => {
- _this.$notify({
- title: "瀹夎澶辫触",
- message: e.data,
- type: "warning",
- });
- if (action == "upgrade") {
- app.upgradeLoading = false;
- } else {
- app.installLoading = false;
- }
+ _this.$notify.warning(e.data);
+ clearInterval(timer);
+ app.upgradeLoading = false;
});
-
// 寮�鍚嚜鍔ㄥ埛鏂�
this.appUpgreading = true;
},
@@ -630,17 +750,17 @@
{ unloadLoading: false, upgradeLoading: false },
item
);
- if (obj.progressMsg !== "" && obj.progressMsg !== "宸插畨瑁�") {
+ if (
+ obj.progressMsg !== "" &&
+ obj.progressMsg !== "宸插畨瑁�" &&
+ obj.progressMsg != "100%"
+ ) {
obj.upgradeLoading = true;
-
this.appUpgreading = true;
}
if (obj.upgradeDone) {
- this.$notify({
- type: "success",
- message: 1 ? "绠楁硶瀹夎鎴愬姛" : "绠楁硶鍗囩骇鎴愬姛",
- });
+ this.$notify.success(1 ? "绠楁硶瀹夎鎴愬姛" : "绠楁硶鍗囩骇鎴愬姛");
}
item.installed ? iArry.push(obj) : sArry.push(obj);
@@ -664,12 +784,7 @@
app.unloadLoading = false;
_this.getAllApps();
window.parent.postMessage({ msg: "AppUpdate" }, "*");
-
- _this.$notify({
- title: "鎴愬姛",
- message: "鍗歌浇搴旂敤鎴愬姛",
- type: "success",
- });
+ _this.$notify.success("鍗歌浇搴旂敤鎴愬姛");
}
})
.catch((e) => {
@@ -704,6 +819,21 @@
getUnActivedSdk().then((res) => {
if (res.code == 200) {
this.unActivedSDKList = res.data;
+ const len = this.unActivedSDKList.length;
+ const set = new Set();
+ if (len <= 3) {
+ this.recomandUpdateList = [...this.unActivedSDKList];
+ } else {
+ for (let i = 0; i < 3; i++) {
+ const pickI = Math.floor(Math.random() * len);
+ if (set.has(pickI)) {
+ i--;
+ continue;
+ }
+ set.add(pickI);
+ this.recomandUpdateList.push(this.unActivedSDKList[pickI]);
+ }
+ }
v == 1 ? (this.tempList = res.data) : null;
}
});
@@ -820,9 +950,12 @@
{ unloadLoading: false, upgradeLoading: false },
item
);
- if (obj.progressMsg !== "" && obj.progressMsg !== "宸插畨瑁�") {
+ if (
+ obj.progressMsg !== "" &&
+ obj.progressMsg !== "宸插畨瑁�" &&
+ obj.progressMsg !== "100%"
+ ) {
obj.upgradeLoading = true;
-
this.sdkUpgreading = true;
}
@@ -875,64 +1008,17 @@
})
.catch((e) => {});
},
- upgradeSDKinWin() {
- this.isUpgrading = !this.isUpgrading;
- let _this = this;
- if (this.productDetail.productTypeName == "搴旂敤") {
- installApp({ path: this.productDetail.productBaseId })
- .then((res) => {
- if (res && res.success) {
- this.$notify.success("鍗囩骇瀹屾垚");
- this.needToUpgradeInWin = false;
- this.productDetail.isUpgrade = false;
- this.isUpgrading = !this.isUpgrading;
- }
- })
- .catch((e) => {
- this.$notify.warning("鍗囩骇澶辫触");
- this.isUpgrading = !this.isUpgrading;
- });
- // 寮�鍚嚜鍔ㄥ埛鏂�
- this.appUpgreading = true;
- } else {
- downloadSdk({ path: this.productDetail.productBaseId })
- .then((res) => {
- this.needToUpgradeInWin = false;
- this.productDetail.isUpgrade = false;
- this.isUpgrading = !this.isUpgrading;
- this.$notify.success("鍗囩骇瀹屾垚");
- })
- .catch((err) => {
- this.$notify.warning("鍗囩骇澶辫触");
- this.isUpgrading = !this.isUpgrading;
- });
- this.sdkUpgreading = true;
- }
- },
- downloadSdkInSide() {
- this.downloadItem = this.productDetail.productBaseId;
- this.isUpgrading = true;
- downloadSdk({ path: this.productDetail.productBaseId })
- .then((rsp) => {
- this.productDetailVisible = false;
- this.downloadItem = "";
- this.$notify.success("绠楁硶宸插畨瑁�");
- this.isUpgrading = false;
- })
- .catch((err) => {
- this.$notify.warning(err.data);
- this.downloadItem = "";
- this.isUpgrading = false;
- });
- // 寮�鍚嚜鍔ㄥ埛鏂�
- this.sdkUpgreading = true;
- },
- donwload(item) {
+ donwloadSDK(item) {
+ let timer = null;
item.upgradeLoading = true;
+ timer = setInterval(() => {
+ this.rocketIf = !this.rocketIf;
+ }, 350);
this.downloadItem = item.id;
downloadSdk({ path: item.id })
.then((rsp) => {
+ clearInterval(timer);
item.upgradeLoading = false;
this.downloadItem = "";
window.parent.postMessage({ msg: "AppUpdate" }, "*");
@@ -944,9 +1030,6 @@
});
// 寮�鍚嚜鍔ㄥ埛鏂�
this.sdkUpgreading = true;
- },
- inputBlur(item) {
- this.$set(item, "isEdit", false);
},
autoRefreshAppAndSdkState() {
// 鍏抽棴鍚庨��鍑�
@@ -973,31 +1056,6 @@
height: 100%;
box-sizing: border-box;
text-align: left;
- min-width: 1106px;
-}
-.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;
-}
-
-.update-badge .el-badge__content.is-fixed {
- top: 10px;
- right: 4px;
}
.task-manage {
@@ -1067,12 +1125,14 @@
border-left: 3px solid #f3f6fc;
cursor: pointer;
caret-color: transparent;
- .el-badge__content {
- border-radius: 50%;
+ sup {
+ background-color: #f52323;
font-size: 12px;
- height: 14px;
- line-height: 14px;
- padding: 0px 3px;
+ color: #fff;
+ height: 18px;
+ line-height: 18px;
+ padding: 0 3.5px;
+ border-radius: 50%;
}
}
.menu-item:hover {
@@ -1084,12 +1144,20 @@
border-left: 3px solid #23d7ee;
font-weight: 700;
font-size: 16px;
- // transition: transform .3s cubic-bezier(.645,.045,.355,1);
color: #333;
}
}
.nav-box-search {
z-index: 99;
+ position: relative;
+ .all-scene {
+ position: absolute;
+ z-index: 100;
+ right: 64px;
+
+ top: 10px;
+ font-size: 12px;
+ }
.el-input {
position: relative;
font-size: 12px;
@@ -1099,17 +1167,19 @@
border: none;
height: 30px;
line-height: 30px;
+ padding: 0 12px;
}
.el-input-group__prepend {
border-right: 0;
border: none;
border-radius: 20px;
background: #fff;
- padding: 0 25px;
+ padding: 0 0 0 15px;
+
i {
font-weight: 600;
color: #333;
- font-size: 19px;
+ font-size: 16px;
}
}
.el-input-group--append .el-input__inner,
@@ -1122,7 +1192,7 @@
border-left: 0;
border: none;
border-radius: 20px;
- width: 64px;
+ width: 52px;
background: linear-gradient(
180deg,
#ecfcfe 0%,
@@ -1138,11 +1208,38 @@
font-size: 12px;
font-weight: bold;
letter-spacing: 0.5px;
+ padding: 0 0px 0 30px;
+ color: #474747;
+ }
+ .el-input__suffix {
+ display: none;
}
}
.el-input__inner::placeholder {
color: rgb(71, 71, 71);
- // font-weight: 600;
+ }
+ .el-select-dropdown {
+ min-width: 120px !important;
+ left: -26px !important;
+ background: rgba(236, 245, 253, 0.6);
+ border-radius: 2px;
+ border: none;
+ .el-select-dropdown__item {
+ height: 22px;
+ line-height: 22px;
+ font-size: 12px;
+ letter-spacing: 0.4px;
+ color: #333333;
+ .icon {
+ margin-right: 5px;
+ font-size: 15px;
+ }
+ }
+ .el-select-dropdown__item.hover,
+ .el-select-dropdown__item:hover {
+ background-color: #ebf4fd;
+ font-weight: 600;
+ }
}
}
.el-input-group__prepend .el-select {
@@ -1163,8 +1260,8 @@
position: absolute;
z-index: 1;
right: 0;
- top: 70px;
- height: 200px;
+ top: 41px;
+ height: 229px;
img {
height: 100%;
}
@@ -1185,16 +1282,26 @@
height: 75px;
display: flex;
align-items: center;
+ .left-items {
+ display: flex;
+ }
.quick-item {
display: flex;
cursor: pointer;
padding: 2px 20px;
height: 52px;
box-sizing: border-box;
- border-right: 1px solid #e0e0e0;
+
.icon-img {
width: 48px;
height: 48px;
+ position: relative;
+ .icon {
+ position: absolute;
+ right: -7px;
+ top: -7px;
+ font-size: 13px;
+ }
img {
width: 48px;
height: 48px;
@@ -1219,11 +1326,17 @@
}
}
.right-icon {
- padding: 5px 0;
+ padding: 2px 0;
+
+ .icon {
+ font-size: 21px;
+ }
}
}
+ .quick-item:not(:last-child) {
+ border-right: 1px solid #e0e0e0;
+ }
.down-all-btn {
- // margin-left: 25px;
position: absolute;
right: 30px;
.el-button {
@@ -1236,7 +1349,7 @@
}
}
.main-content {
- padding: 35px 60px;
+ padding: 35px 82px;
z-index: 99;
.main-title {
line-height: 25px;
@@ -1250,7 +1363,7 @@
.group-left {
display: flex;
.tab {
- font-size: 15px;
+ font-size: 14px;
margin-right: 25px;
line-height: 28px;
cursor: pointer;
@@ -1279,30 +1392,43 @@
}
}
.front-page-items {
- padding-top: 30px;
+ padding-top: 25px;
.front-page-item {
float: left;
display: flex;
- margin-bottom: 30px;
- padding: 2px 0;
- height: 60px;
+ margin: 0 5px;
+ margin-bottom: 15px;
box-sizing: border-box;
- width: 278px;
+ width: 274px;
+
justify-content: center;
cursor: pointer;
- border-radius: 6px;
+
+ padding: 10px 0;
+ height: 76px;
+ border-radius: 4px;
+
.icon-img {
width: 58px;
height: 58px;
+ position: relative;
+ .icon {
+ position: absolute;
+ right: -9px;
+ top: -9px;
+ font-size: 16px;
+ }
img {
width: 58px;
height: 58px;
+ border-radius: 10px;
}
}
.desc {
box-sizing: border-box;
padding: 0 12px;
- width: 140px;
+ width: 147px;
+
.desc-1 {
font-size: 14px;
font-weight: bold;
@@ -1320,26 +1446,66 @@
}
}
.right-btn {
- padding: 5px 0;
- .el-button {
- padding: 3px 12px;
+ padding: 2px 0;
+ width: 50px;
+ text-align: center;
+ position: relative;
+ .check-btn {
+ background-color: #f2f2f7 !important;
+ border-color: #f2f2f7 !important;
+ color: #4f4f4f;
+ }
+ .update-btn {
+ border-color: #23d7ee !important;
+ background-color: rgba(29, 212, 236, 0.1) !important;
+ color: #4f4f4f;
+ }
+ .other-btn {
background-color: #1dd4ec !important;
border-color: #1dd4ec !important;
- border-radius: 22px;
+ color: #ffffff;
}
- .el-button--primary:hover {
- background: #089fb3 !important;
- border-color: #089fb3 !important;
+ @keyframes spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+ }
+ .anz-font {
+ font-size: 28px;
+ color: #333;
+ }
+
+ .spin-icon {
+ animation: spin 0.8s linear infinite;
+ }
+ .status {
+ font-size: 12px;
+ color: #828282;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ min-width: 100px;
+ text-align: end;
+ position: absolute;
+ right: 0;
+ margin-top: 2px;
+ }
+ .rocket-icon {
+ font-size: 20px;
+ }
+ .el-button {
+ padding: 3px 12px;
+ border-radius: 22px;
+ font-weight: bold;
+ letter-spacing: 0.5px;
}
}
}
.front-page-item:hover {
- background: linear-gradient(
- 180deg,
- #ecfcfe 0%,
- #ebf4fd 47.92%,
- #f4f4fe 100%
- );
+ // background-color: #f2f2f7;
}
.item-dimmed {
color: gray;
@@ -1353,29 +1519,53 @@
clear: both;
visibility: hidden;
}
- .upload-pkg{
- .upload-head{
+ .upload-pkg {
+ .upload-head {
display: flex;
- justify-content: space-between;
- align-items: center;
- .left{
+ justify-content: space-between;
+ align-items: center;
+ .left {
display: flex;
align-items: center;
- .iconfont{
+ .iconfont {
font-size: 18px;
margin-right: 6px;
}
- .txt{
- font-size: 16px;
-
+ .txt {
+ font-size: 16px;
}
}
- .right{
- .icon{
- margin-right: 10px;
+ .right {
+ .icon {
+ margin-right: 11px;
font-size: 17px;
+ cursor: pointer;
}
}
+ }
+ }
+ .upload-demo {
+ margin: 30px 0px;
+ .drag-txt {
+ width: 340px;
+ height: 45px;
+ border: 1px dashed #bdbdbd;
+ display: flex;
+ margin-top: 30px;
+ align-items: center;
+ justify-content: center;
+ color: #828282;
+ font-size: 14px;
+ }
+ .txt-btn {
+ width: 78px;
+ margin-top: 18px;
+ height: 19px;
+ background: #23d7ee;
+ border-radius: 22px;
+ color: #ffffff;
+ font-weight: bold;
+ font-size: 12px;
}
}
}
@@ -1415,148 +1605,11 @@
}
}
- .list-choose-item {
- cursor: pointer;
- position: relative;
- font-size: 14px;
- display: inline-block;
- @media screen and(min-width: 1640px) {
- margin: 30px 20px 20px 20px;
- }
- @media screen and(min-width: 1460px) and(max-width: 1640px) {
- margin: 30px 20px 20px 10px;
- }
- @media screen and(max-width: 1460px) {
- margin: 30px 10px 20px 10px;
- }
- min-width: 126px;
- height: 120px;
- transition: all 1s;
- background: #fff;
- border: 1px solid #e2e2e2;
- box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);
- border-radius: 4px;
- }
- .list-choose-item:hover {
- .mask {
- display: block;
- }
- }
-
- .list-choose-item-left {
- cursor: pointer;
- position: relative;
- font-size: 14px;
-
- transition: all 1s;
- border-radius: 4px;
- p {
- display: none;
- text-align: right;
- width: 100%;
- position: absolute;
- right: 10px;
- top: 5px;
- }
- .click-download {
- position: absolute;
- left: 80%;
- top: 5%;
- }
- }
- .list-choose-item-left:hover {
- .mask {
- display: flex;
- align-items: flex-end;
- flex-wrap: wrap;
- justify-content: center;
- top: 0;
-
- .bot-btn {
- flex: 1;
- }
- &.flex-center {
- align-items: center;
- justify-content: center;
- }
- }
- }
- .list-choose-item-left-uninstal {
- color: gray;
- filter: grayscale(100%);
- }
- .list-complete-item.sortable-chosen {
- background: #4ab7bd;
- }
- .list-choose-item.sortable-ghost {
- background: #30b08f;
- }
-
- .list-choose-header {
- position: relative;
- width: 74px;
- height: 74px;
- background-image: linear-gradient(-137deg, #7076f2 0%, #3d63e1 100%);
- box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);
- border-radius: 37px;
- margin: 10px 25px;
- }
-
- .b-top {
- width: 100%;
- padding-top: 10px;
- }
- .b-bottom {
- width: 100%;
- border-bottom: 1px solid rgba(24, 28, 33, 0.5);
- }
- .i-set-right {
- position: absolute;
- left: 80px;
- top: -11px;
- font-size: 24px;
- }
- .i-remove-right {
- position: absolute;
- right: -1px;
- top: -11px;
- font-size: 24px;
- color: red;
- }
- .alg-t {
- line-height: 31px;
- font-family: PingFangSC-Medium;
- font-size: 14px;
- color: #222222;
- }
- .alg-name {
- line-height: 20px;
- font-family: PingFangSC-Regular;
- font-size: 14px;
- letter-spacing: 0.05em;
- color: #333;
- .el-input {
- position: relative;
- font-size: 14px;
- display: inline-block;
- width: 100%;
- }
- }
-
.el-input {
position: relative;
font-size: 14px;
// display: inline-block;
// width: 80%;
- }
-
- .drag-info {
- min-width: 126px;
- height: 120px;
- border: 1px dashed #3d68e1;
- box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);
- border-radius: 4px;
- margin: 30px 10px 20px 10px;
}
.el-button--cancle {
@@ -1567,39 +1620,6 @@
font-size: 13px;
color: #222222;
margin-right: 12px;
- }
-
- .task-name-google {
- position: relative;
- top: 30px;
- width: 126px;
- height: 120px;
- border: 1px solid #fff;
- background: #fff;
- border-radius: 4px;
- cursor: pointer;
- .set-task {
- display: none;
- cursor: pointer;
- }
-
- .el-switch__core {
- width: 27px !important;
- height: 14px;
- }
- .el-switch__core:after {
- width: 10px;
- height: 10px;
- }
- .el-switch.is-checked .el-switch__core::after {
- left: 100%;
- margin-left: -11px;
- }
- }
- .task-name-google:hover {
- .mask {
- display: block;
- }
}
}
}
--
Gitblit v1.8.0