<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 && (!detailPrice || 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 && detailPrice"
|
>
|
</el-input>
|
<el-button
|
size="mini"
|
round
|
class="act-btn"
|
v-if="!isActive && !showInstallNotActive && detailPrice"
|
@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">
|
<el-tooltip :content="item.name" effect="light">
|
<div class="desc-1">{{ item.name }}</div>
|
</el-tooltip>
|
<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">
|
<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: "",
|
select: "",
|
activedSdkOrApp: {
|
activateCode: "",
|
productName: "",
|
setting: "",
|
expireTime: "",
|
licence: "",
|
devIds: ""
|
},
|
installedApps: [],
|
storeApps: [],
|
installFile: {},
|
appUpgreading: false,
|
sdkUpgreading: false,
|
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
|
},
|
detailPrice: {},
|
isSdk: {}
|
},
|
directives: {
|
focus: {
|
inserted: function(el) {
|
el.querySelector("input").focus()
|
}
|
}
|
},
|
mounted() {
|
this.getDetail()
|
this.autoRefreshAppAndSdkState()
|
// this.getUnActivedList();
|
// this.getUnActivedAppList();
|
this.showBackBtn()
|
this.addBackListener()
|
},
|
beforeDestroy() {
|
this.autoRefresh = false
|
this.hiddenBackBtn()
|
},
|
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) => {
|
console.log(e)
|
this.isInstall = false
|
this.$message({
|
type: "error",
|
message: e.msg
|
})
|
})
|
},
|
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.$emit("flushApp")
|
window.parent.postMessage(
|
{
|
msg: "AppUpdate"
|
},
|
"*"
|
)
|
_this.$notify({
|
title: "成功",
|
message: "卸载应用成功",
|
type: "success"
|
})
|
this.goback()
|
}
|
})
|
.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.isSdk) {
|
//激活算法
|
actPageAlg(this.detailProductID, 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) => {
|
this.$notify({
|
type: "error",
|
message: e.msg
|
})
|
})
|
} else {
|
//激活应用
|
actApp(this.detailProductID, 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) => {
|
this.$notify({
|
type: "error",
|
message: e.msg
|
})
|
})
|
}
|
},
|
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();
|
this.$emit("flushSdk")
|
window.parent.postMessage({ msg: "AppUpdate" }, "*")
|
this.goback()
|
}
|
})
|
.catch((e) => {
|
console.log(e)
|
sdk.unloadLoading = false
|
})
|
})
|
.catch((e) => {
|
console.log("取消", 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() {
|
this.getAllApps()
|
this.getAllSdk()
|
if (!this.autoRefresh) {
|
return
|
}
|
setTimeout(() => {
|
if (this.appUpgreading) {
|
this.getAllApps()
|
}
|
if (this.sdkUpgreading) {
|
this.getAllSdk()
|
}
|
}, 1000)
|
},
|
showBackBtn() {
|
window.parent.postMessage(
|
{
|
msg: "showBack"
|
},
|
"*"
|
)
|
},
|
hiddenBackBtn() {
|
window.parent.postMessage(
|
{
|
msg: "hiddenBack"
|
},
|
"*"
|
)
|
},
|
addBackListener() {
|
window.addEventListener("message", (e) => {
|
if (e.data.msg === "返回应用中心") {
|
this.goback()
|
}
|
})
|
}
|
}
|
}
|
</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 {
|
display: inline-block;
|
line-height: 20px;
|
padding: 0px 10px;
|
letter-spacing: 0.5px;
|
font-size: 12px;
|
color: #828282;
|
font-weight: bold;
|
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;
|
width: 116px;
|
height: 28px;
|
letter-spacing: 0.1px;
|
color: #4f4f4f;
|
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
.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>
|
