<template>
|
<div class="detail-page">
|
<div class="detail-top">
|
<div class="title-area">
|
<div class="icon-img">
|
<img v-if="productDetail.logoUrl" :src="productDetail.logoUrl" alt />
|
</div>
|
<div class="right-info">
|
<div class="right-info-1">
|
<span class="name">{{ productDetail.productName }}</span>
|
<el-tag type="info" size="mini" color="#fff">{{
|
isSDKDetail ? "算法" : "应用"
|
}}</el-tag>
|
</div>
|
<div class="right-info-2">
|
<el-button
|
size="mini"
|
round
|
class="update-btn"
|
@click="upgradeSDKinWin"
|
v-if="productDetail.isUpgrade"
|
>更新</el-button
|
>
|
<el-button
|
size="mini"
|
round
|
v-if="!isSDKDetail && isActive"
|
@click="openApp"
|
>打开</el-button
|
>
|
<el-button
|
size="mini"
|
round
|
v-if="isActive && !isDefaultApp"
|
@click="unloadSDKinWin"
|
>卸载</el-button
|
>
|
<el-button
|
size="mini"
|
round
|
v-if="!isActive && showInstallNotActive"
|
@click="downloadSdkInSide"
|
>安装</el-button
|
>
|
<!-- suffix-icon="iconfont iconchushaixuanxiang" -->
|
<el-input
|
class="activeInput"
|
placeholder="请输入激活码"
|
size="mini"
|
clearable
|
:autofocus="true"
|
v-model="activeCode"
|
v-if="!isActive && !showInstallNotActive"
|
>
|
</el-input>
|
<el-button
|
size="mini"
|
round
|
class="act-btn"
|
v-if="!isActive && !showInstallNotActive"
|
@click="actived"
|
>激活</el-button
|
>
|
<!-- <span
|
class="icon iconfont"
|
v-if="!isActive && !showInstallNotActive"
|
@click="activeCode = ''"
|
></span
|
> -->
|
</div>
|
</div>
|
<div class="back-btn" @click="goback">
|
<span class="icon iconfont"></span>
|
<span class="back-text">返回</span>
|
</div>
|
</div>
|
<div class="text-area">
|
<div class="text-line">
|
<span class="icon iconfont" ></span>
|
<span class="title">版本：</span>
|
<span class="desc">{{ productDetail.productVersion }}</span>
|
</div>
|
<div class="text-line">
|
<span class="icon iconfont"></span>
|
<span class="title">概述：</span>
|
<span class="desc">{{ productDetail.description || "暂无" }}</span>
|
</div>
|
<div class="text-line">
|
<span class="icon iconfont"></span>
|
<span class="title">详述：</span>
|
<span class="desc">{{ productDetail.summary || "暂无" }}</span>
|
</div>
|
</div>
|
</div>
|
<div class="detail-mid">
|
<div class="mid-left">
|
<div class="mid-title">{{ isSDKDetail ? "应用场景" : "功能特点" }}</div>
|
<div
|
v-for="(item, index) in productDetail.funcInfo"
|
:key="index"
|
class="desc-item"
|
>
|
<div class="title">{{ item.title }}</div>
|
<div class="desc">{{ item.desc }}</div>
|
</div>
|
</div>
|
<div class="mid-right">
|
<el-carousel
|
trigger="click"
|
:autoplay="false"
|
indicator-position="none"
|
:arrow="
|
productDetail.pics !== undefined
|
? productDetail.pics.length > 1
|
? 'always'
|
: 'never'
|
: 'never'
|
"
|
>
|
<el-carousel-item
|
v-for="(item, index) in productDetail.pics"
|
:key="index"
|
>
|
<img
|
v-if="item.type != 'video'"
|
:src="item.url"
|
class="cursor-pointer"
|
preview
|
/>
|
<video
|
v-if="item.type == 'video'"
|
:src="'/httpImage/' + item.url"
|
controls
|
></video>
|
</el-carousel-item>
|
</el-carousel>
|
</div>
|
</div>
|
<div class="rec-bot">
|
<div class="rec-title">{{ isSDKDetail ? "推荐算法" : "推荐应用" }}</div>
|
|
<div class="rec-items">
|
<div
|
class="rec-item"
|
v-for="(item, index) in otherProducts"
|
:key="index"
|
@click="checkInWindow(item)"
|
>
|
<div class="icon-img">
|
<img
|
v-if="item.iconBlob"
|
:src="
|
item.iconBlob.indexOf(',') > 0
|
? item.iconBlob
|
: `data:image/png;base64,${item.iconBlob}`
|
"
|
alt
|
/>
|
</div>
|
<div class="desc">
|
<div class="desc-1">{{ item.name }}</div>
|
<div class="desc-2">版本 {{ item.productVersion || "2.0.0" }}</div>
|
</div>
|
<div class="right-btn">
|
<el-button
|
size="small"
|
type="primary"
|
|
round
|
@click="checkInWindow(item)"
|
>查看</el-button
|
>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<el-dialog
|
:visible.sync="showActivateSuccess"
|
title="激活成功！"
|
width="30%"
|
class="active-Dial"
|
:before-close="handleClose"
|
>
|
<div class="dialog-active">
|
<ul class="desc">
|
<li>
|
<label>激活码:</label>
|
<span>{{ activedSdkOrApp.activateCode }}</span>
|
</li>
|
<li>
|
<label>产品名称:</label>
|
<span>{{ activedSdkOrApp.productName }}</span>
|
</li>
|
<li>
|
<label>配置详情:</label>
|
<span>{{ activedSdkOrApp.setting }}</span>
|
</li>
|
<li>
|
<label>服务到期日:</label>
|
<span>{{ activedSdkOrApp.expireTime }}</span>
|
</li>
|
<li>
|
<label>许可证:</label>
|
<span>{{ activedSdkOrApp.licence }}</span>
|
</li>
|
</ul>
|
<div class="text-right">
|
<el-button type="primary" @click="checkMyAlgorith">确定</el-button>
|
<p class="tip">提示：请在“已激活”中查看并安装算法</p>
|
</div>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import {
|
findAllSdk,
|
downloadSdk,
|
installSdk,
|
getInstallInfo,
|
removeSdk,
|
} from "./api";
|
import {
|
getApps,
|
installApp,
|
getAppDetail,
|
removeApp,
|
getUnActivedSdk,
|
actPageAlg,
|
getUnActivedApp,
|
actApp,
|
} from "@/api/app";
|
import { getUrlKey } from "@/api/utils";
|
export default {
|
components: {},
|
computed: {
|
updateNum() {
|
return this.hasNewVersionApp.length + this.hasNewVersionSdk.length;
|
},
|
isAdmin() {
|
if (
|
sessionStorage.getItem("userInfo") &&
|
sessionStorage.getItem("userInfo") !== ""
|
) {
|
let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username;
|
return loginName === "superadmin" || loginName === "basic";
|
}
|
|
return false;
|
},
|
},
|
data() {
|
return {
|
installedList: [],
|
hasNewVersionSdk: [],
|
hasNewVersionApp: [],
|
notInstalledList: [],
|
buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
|
activeName: "myAlgorithm",
|
patchUpdateStatus: "",
|
downloadItem: "",
|
downloading: false,
|
actStep: 0,
|
showActivateSuccess: false,
|
activeCode: "",
|
isInstall: false,
|
installDialogVisible: false,
|
installAppPackage: null,
|
installSdkPackage: null,
|
isActive: true,
|
isDefaultApp: false,
|
unActivedSDKList: [],
|
unActivedAppList: [],
|
isSDKDetail: true,
|
actType: "",
|
actId: "",
|
input3: "",
|
select: "",
|
activedSdkOrApp: {
|
activateCode: "",
|
productName: "",
|
setting: "",
|
expireTime: "",
|
licence: "",
|
devIds: "",
|
},
|
installedApps: [],
|
storeApps: [],
|
installFile: {},
|
appUpgreading: true,
|
sdkUpgreading: true,
|
autoRefresh: true,
|
productDetailVisible: false,
|
isUpgrading: false,
|
productDetail: {},
|
otherProducts: [],
|
backStack: [],
|
toUpdateArr: [],
|
toUpdateArr1: [],
|
forwardStack: [],
|
backDisable: true,
|
forwardDisable: true,
|
showInputCode: false,
|
needToUpgradeInWin: false,
|
showInstallNotActive: false,
|
};
|
},
|
props: {
|
detailType: {
|
type: String,
|
},
|
detailProductID: {
|
type: String,
|
},
|
},
|
directives: {
|
focus: {
|
inserted: function (el) {
|
el.querySelector("input").focus();
|
},
|
},
|
},
|
mounted() {
|
this.getDetail();
|
this.autoRefreshAppAndSdkState();
|
this.getUnActivedList();
|
this.getUnActivedAppList();
|
},
|
beforeDestroy() {
|
this.autoRefresh = false;
|
},
|
methods: {
|
getDetail(id) {
|
getAppDetail({ id: id || this.detailProductID })
|
.then((res) => {
|
if (res.success) {
|
this.productDetail = res.data.detail;
|
this.otherProducts = res.data.randoms;
|
|
this.isSDKDetail = this.productDetail.productTypeName == "SDK";
|
this.isDefaultApp = this.productDetail.productBaseId.length < 10;
|
} else {
|
this.$message.error(res.msg);
|
}
|
})
|
.catch((err) => {
|
this.$message.error(err.msg);
|
});
|
this.isActive = this.detailType == "active";
|
this.showInstallNotActive = this.detailType == "activeNotInstall";
|
},
|
goback() {
|
this.productDetail = {};
|
this.$emit("goback");
|
},
|
isShow(authority) {
|
return (
|
this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1
|
);
|
},
|
closeDial() {
|
this.productDetailVisible = false;
|
this.productDetail = {};
|
this.otherProducts = [];
|
},
|
|
resetStack() {
|
this.forwardStack = [];
|
this.backStack = [];
|
this.backDisable = true;
|
this.forwardDisable = true;
|
},
|
checkInWindow(item) {
|
getAppDetail({ id: item.id }).then((res) => {
|
this.productDetail = res.data.detail;
|
this.productDetail.iconBlob = item.iconBlob;
|
this.actId = this.productDetail.productBaseId;
|
this.isSDKDetail = this.productDetail.productTypeName == "SDK";
|
this.isDefaultApp = this.productDetail.productBaseId.length < 10;
|
|
this.otherProducts = res.data.randoms;
|
});
|
},
|
checkIsDefOrNot(id) {
|
if (id.length > 10) {
|
this.isDefaultApp = false;
|
} else {
|
this.isDefaultApp = true;
|
}
|
},
|
backwards() {
|
if (this.backStack.length == 0) {
|
this.backDisable = true;
|
return;
|
}
|
this.forwardStack.push([this.productDetail, this.otherProducts]);
|
let item = this.backStack.pop();
|
this.productDetail = item[0];
|
this.checkIsDefOrNot(this.productDetail.productBaseId);
|
this.otherProducts = item[1];
|
this.forwardDisable = false;
|
if (this.backStack.length == 0) {
|
this.backDisable = true;
|
}
|
},
|
forwards() {
|
if (this.forwardStack.length == 0) {
|
this.forwardDisable = true;
|
return;
|
}
|
|
this.backStack.push([this.productDetail, this.otherProducts]);
|
this.backDisable = false;
|
let item = this.forwardStack.pop();
|
|
this.productDetail = item[0];
|
this.otherProducts = item[1];
|
if (this.forwardStack.length == 0) {
|
this.forwardDisable = true;
|
}
|
},
|
//离线安装
|
offlineInstall() {
|
this.installDialogVisible = false;
|
this.isInstall = true;
|
//安装
|
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) => {
|
this.isInstall = false;
|
this.$message({
|
type: "error",
|
message: e.data,
|
});
|
});
|
},
|
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) {
|
_this.$notify({
|
title: "成功",
|
message: "安装应用成功",
|
type: "success",
|
});
|
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.appUpgreading = true;
|
},
|
async getAllApps() {
|
let iArry = [],
|
sArry = [],
|
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
|
);
|
if (obj.progressMsg !== "" && obj.progressMsg !== "已安装") {
|
obj.upgradeLoading = true;
|
|
this.appUpgreading = true;
|
}
|
|
if (obj.upgradeDone) {
|
this.$notify({
|
type: "success",
|
message: 1 ? "算法安装成功" : "算法升级成功",
|
});
|
}
|
|
item.installed ? iArry.push(obj) : sArry.push(obj);
|
item.isUpgrade && nArry.push(obj);
|
});
|
}
|
this.installedApps = iArry;
|
this.storeApps = sArry;
|
this.hasNewVersionApp = nArry;
|
},
|
unLoad(app) {
|
let _this = this;
|
this.$confirm("确定要卸载该应用吗?", "提示")
|
.then(() => {
|
_this.productDetailVisible = false;
|
app.unloadLoading = true;
|
removeApp({ appId: app.id })
|
.then((res) => {
|
if (res && res.success) {
|
app.unloadLoading = false;
|
_this.getAllApps();
|
window.parent.postMessage(
|
{
|
msg: "AppUpdate",
|
},
|
"*"
|
);
|
_this.$notify({
|
title: "成功",
|
message: "卸载应用成功",
|
type: "success",
|
});
|
}
|
})
|
.catch((e) => {
|
app.unloadLoading = false;
|
});
|
})
|
.catch((e) => {});
|
},
|
actSdkOrApp(item, type = "sdk") {
|
this.checkDetail(item, "inactive");
|
this.actType = type;
|
this.actId = item.id;
|
this.actStep = 0;
|
this.activeCode = "";
|
this.activedSdkOrApp = this.newActInfo();
|
},
|
cancelActivate() {
|
this.showInputCode = false;
|
this.activeCode = "";
|
},
|
newActInfo() {
|
return {
|
activateCode: "",
|
productName: "",
|
setting: "",
|
expireTime: "",
|
licence: "",
|
devIds: "",
|
};
|
},
|
getUnActivedList() {
|
getUnActivedSdk().then((res) => {
|
if (res.code == 200) {
|
this.unActivedSDKList = res.data;
|
}
|
});
|
},
|
getUnActivedAppList() {
|
getUnActivedApp().then((res) => {
|
if (res.code == 200) {
|
this.unActivedAppList = res.data;
|
}
|
});
|
},
|
actived() {
|
let _this = this;
|
if (this.activeCode.trim() == "") {
|
this.$notify({
|
type: "error",
|
message: "激活码不能为空",
|
});
|
return;
|
}
|
if (this.actType == "sdk") {
|
//激活算法
|
actPageAlg(this.actId, this.activeCode)
|
.then((res) => {
|
if (res.data.isSuccess) {
|
this.productDetailVisible = false;
|
_this.activedSdkOrApp = res.data.successMsg;
|
this.showActivateSuccess = true;
|
_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.productDetailVisible = false;
|
_this.activedSdkOrApp = res.data.successMsg;
|
this.showActivateSuccess = true;
|
_this.actStep++;
|
_this.getUnActivedAppList();
|
_this.getAllApps();
|
} else {
|
_this.$notify({
|
type: "error",
|
message: res.data.failMsg.failMsg,
|
});
|
}
|
})
|
.catch((e) => {
|
console.log(e);
|
});
|
}
|
},
|
checkMyAlgorith() {
|
this.showActivateSuccess = false;
|
this.goback();
|
this.activeName = "已激活";
|
},
|
onFileUpload(file) {
|
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,
|
};
|
}
|
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,
|
};
|
}
|
} else {
|
this.$message({
|
type: "error",
|
message: res.msg,
|
});
|
}
|
})
|
.catch((e) => {
|
this.$message({
|
type: "error",
|
message: e.msg,
|
});
|
});
|
},
|
openApp() {
|
window.parent.postMessage(
|
{ msg: "toOpenApp?" + this.productDetail.productBaseId },
|
"*"
|
);
|
},
|
onFileAdded(f) {
|
this.patchUpdateStatus = "";
|
},
|
async getAllSdk() {
|
let installedList = [];
|
let unInstalledList = [];
|
let hasNewVersionList = [];
|
let res = await findAllSdk();
|
if (res && res.success) {
|
this.sdkUpgreading = false;
|
|
res.data.forEach((item) => {
|
let obj = Object.assign(
|
{ unloadLoading: false, upgradeLoading: false },
|
item
|
);
|
if (obj.progressMsg !== "" && obj.progressMsg !== "已安装") {
|
obj.upgradeLoading = true;
|
|
this.sdkUpgreading = true;
|
}
|
|
//算法软件 已安装其中包含待升级 未安装
|
item.installed ? installedList.push(obj) : unInstalledList.push(obj);
|
item.isUpgrade ? hasNewVersionList.push(obj) : null;
|
});
|
}
|
this.installedList = installedList;
|
this.notInstalledList = unInstalledList;
|
this.toUpdateArr = this.installedList.slice(0, 4);
|
this.hasNewVersionSdk = hasNewVersionList;
|
},
|
unloadSDKinWin() {
|
let appToUnload;
|
let sdkToUnload;
|
if (this.productDetail.productTypeName == "应用") {
|
appToUnload = this.installedApps.find((item) => {
|
return item.id == this.productDetail.productBaseId;
|
});
|
this.unLoad(appToUnload);
|
} else {
|
sdkToUnload = this.installedList.find((item) => {
|
return item.id == this.productDetail.productBaseId;
|
});
|
this.unLoadSdk(sdkToUnload);
|
}
|
},
|
//卸载算法
|
unLoadSdk(sdk) {
|
let _this = this;
|
this.$confirm("确定要卸载该算法吗?", "提示")
|
.then(() => {
|
_this.productDetailVisible = false;
|
sdk.unloadLoading = true;
|
removeSdk({ sdkId: sdk.id })
|
.then((res) => {
|
if (res && res.success) {
|
sdk.unloadLoading = false;
|
this.$notify.success("卸载完成");
|
_this.getAllSdk();
|
window.parent.postMessage({ msg: "AppUpdate" }, "*");
|
}
|
})
|
.catch((e) => {
|
sdk.unloadLoading = false;
|
});
|
})
|
.catch((e) => {});
|
},
|
upgradeSDKinWin() {
|
this.isUpgrading = !this.isUpgrading;
|
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.error("升级失败");
|
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.error("升级失败");
|
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, typ) {
|
item.upgradeLoading = true;
|
this.downloadItem = item.id;
|
downloadSdk({ path: item.id })
|
.then((rsp) => {
|
item.upgradeLoading = false;
|
this.downloadItem = "";
|
window.parent.postMessage(
|
{
|
msg: "AppUpdate",
|
},
|
"*"
|
);
|
})
|
.catch((err) => {
|
this.$notify({
|
type: "warning",
|
message: err.data,
|
});
|
item.upgradeLoading = false;
|
this.downloadItem = "";
|
});
|
// 开启自动刷新
|
this.sdkUpgreading = true;
|
},
|
inputBlur(item) {
|
this.$set(item, "isEdit", false);
|
},
|
autoRefreshAppAndSdkState() {
|
// 关闭后退出
|
if (!this.autoRefresh) {
|
return;
|
}
|
if (this.appUpgreading) {
|
this.getAllApps();
|
}
|
if (this.sdkUpgreading) {
|
this.getAllSdk();
|
}
|
let _this = this;
|
setTimeout(() => {
|
_this.autoRefreshAppAndSdkState();
|
}, 500);
|
},
|
},
|
};
|
</script>
|
<style lang="scss">
|
.detail-page {
|
width: 100% !important;
|
height: 100%;
|
box-sizing: border-box;
|
text-align: left;
|
// min-width: 1106px;
|
.detail-top {
|
padding: 35px 60px;
|
padding-bottom: 20px;
|
border-bottom: 3px solid #f2f2f2;
|
.title-area {
|
display: flex;
|
margin-bottom: 10px;
|
position: relative;
|
.back-btn {
|
position: absolute;
|
right: 0;
|
top: 0;
|
width: 51px;
|
height: 20px;
|
line-height: 20px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
cursor: pointer;
|
.icon {
|
margin-right: 3px;
|
font-size: 18px;
|
}
|
.back-text {
|
font-size: 14px;
|
letter-spacing: 0.5px;
|
}
|
}
|
.icon-img {
|
height: 60px;
|
width: 60px;
|
margin-right: 20px;
|
img {
|
width: 60px;
|
height: 60px;
|
}
|
}
|
.right-info {
|
.right-info-1 {
|
display: flex;
|
align-items: center;
|
margin-bottom: 10px;
|
|
.name {
|
font-size: 16px;
|
font-weight: bold;
|
letter-spacing: 0.5px;
|
line-height: 26px;
|
margin-right: 12px;
|
}
|
.el-tag {
|
line-height: 18px;
|
height: 18px;
|
padding: 0 5px;
|
color: #bdbdbd;
|
border: 1px solid #e0e0e0;
|
}
|
}
|
.right-info-2 {
|
display: flex;
|
align-items: center;
|
.activeInput {
|
.el-input__suffix {
|
display: flex;
|
align-items: center;
|
.el-input__suffix-inner {
|
border-color: none;
|
.el-icon-circle-close:before {
|
content: "\e79d" !important;
|
font-size: 14px;
|
}
|
}
|
}
|
}
|
.iconfont {
|
margin-left: 10px;
|
font-size: 15px;
|
cursor: pointer;
|
}
|
.el-input {
|
margin-right: 12px;
|
width: 224px;
|
font-size: 12px;
|
.el-input__inner {
|
border: 1px solid #bdbdbd;
|
border-radius: 20px;
|
height: 22px;
|
line-height: 22px;
|
}
|
}
|
.el-button {
|
padding: 3px 13px;
|
color: #4f4f4f;
|
font-weight: bold;
|
letter-spacing: 0.5px;
|
background: #f2f2f7;
|
border: 1px solid #f2f2f7;
|
}
|
.update-btn {
|
border-color: #23d7ee;
|
background-color: rgba(29, 212, 236, 0.1);
|
}
|
.act-btn {
|
background: #23d7ee;
|
border: 1px solid #23d7ee;
|
color: #f2f2f2;
|
}
|
// .act-btn:hover {
|
// background: #089fb3 !important;
|
// border-color: #089fb3 !important;
|
// }
|
// .el-button:hover {
|
// border-color: #23d7ee;
|
// background-color: rgba(29, 212, 236, 0.1);
|
// }
|
.el-button + .el-button {
|
margin-left: 12px;
|
}
|
}
|
}
|
}
|
.text-area {
|
.text-line {
|
line-height: 17px;
|
height: 25px;
|
.icon {
|
font-size: 14px;
|
margin-right: 4px;
|
|
}
|
.title {
|
font-size: 12px;
|
font-weight: bold;
|
letter-spacing: 0.5px;
|
}
|
.desc {
|
letter-spacing: 0.5px;
|
}
|
}
|
}
|
}
|
.detail-mid {
|
padding: 20px 60px;
|
display: flex;
|
justify-content: space-between;
|
border-bottom: 3px solid #f2f2f2;
|
.mid-left {
|
max-width: 560px;
|
|
.mid-title {
|
font-size: 16px;
|
font-weight: bold;
|
letter-spacing: 0.5px;
|
line-height: 26px;
|
margin-bottom: 10px;
|
}
|
.desc-item {
|
margin-bottom: 10px;
|
|
.title {
|
width: 80px;
|
height: 20px;
|
letter-spacing: 0.5px;
|
font-size: 12px;
|
color: #828282;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-weight: bold;
|
border: 1px solid;
|
border: 1px solid #e0e0e0;
|
box-sizing: border-box;
|
border-radius: 22px;
|
}
|
.desc {
|
margin-left: 20px;
|
color: #4f4f4f;
|
font-size: 12px;
|
line-height: 17px;
|
}
|
}
|
}
|
.mid-right {
|
width: 460px;
|
.el-carousel__container {
|
position: relative;
|
height: 280px;
|
.el-carousel__item {
|
display: flex;
|
align-items: center;
|
img {
|
width: 100%;
|
}
|
}
|
}
|
.imgwrap {
|
img {
|
width: 100%;
|
}
|
}
|
}
|
}
|
.rec-bot {
|
padding: 20px 60px;
|
.rec-title {
|
font-size: 16px;
|
font-weight: bold;
|
letter-spacing: 0.5px;
|
line-height: 26px;
|
margin-bottom: 20px;
|
}
|
}
|
.rec-items {
|
.rec-item {
|
cursor: pointer;
|
float: left;
|
display: flex;
|
margin: 0 15px;
|
margin-bottom: 30px;
|
padding: 2px 0;
|
height: 62px;
|
box-sizing: border-box;
|
width: 248px;
|
.icon-img {
|
width: 58px;
|
height: 58px;
|
img {
|
width: 58px;
|
height: 58px;
|
}
|
}
|
.desc {
|
box-sizing: border-box;
|
padding: 0 12px;
|
|
width: 100%;
|
.desc-1 {
|
font-size: 14px;
|
font-weight: bold;
|
line-height: 28px;
|
height: 28px;
|
letter-spacing: 0.1px;
|
color: #4f4f4f;
|
}
|
.desc-2 {
|
font-size: 12px;
|
color: #828282;
|
}
|
}
|
.right-btn {
|
padding: 5px 0;
|
.el-button {
|
padding: 3px 12px;
|
border-radius: 22px;
|
background-color: #f2f2f7 !important;
|
border-color: #f2f2f7 !important;
|
color: #4f4f4f;
|
font-size: 12px;
|
font-weight: bold;
|
}
|
// .el-button--primary:hover {
|
// background: #089fb3 !important;
|
// border-color: #089fb3 !important;
|
// }
|
}
|
}
|
}
|
.rec-items:after {
|
content: "";
|
display: block;
|
height: 0;
|
clear: both;
|
visibility: hidden;
|
}
|
}
|
</style>
|
|
