1156 lines
30 KiB
Vue
1156 lines
30 KiB
Vue
<template>
|
|
<div v-loading="maskLoading">
|
|
<div flex style="height: 100%; padding: 0 10px; background: #fff">
|
|
<base-layout
|
|
:defaultButtonSwitch="false"
|
|
title="项目分类"
|
|
:queryShow="false"
|
|
ref="treeLayout"
|
|
class="fenlei"
|
|
>
|
|
<div
|
|
slot="main"
|
|
style="overflow: auto; height: calc(100vh - 150px) !important"
|
|
>
|
|
<div class="addBtn" @click="classifyFuncBtn()">
|
|
<i class="el-icon-plus"></i>
|
|
</div>
|
|
<div
|
|
v-for="(item, index) in classifyList"
|
|
:key="index"
|
|
flex
|
|
class="classifyBox"
|
|
@click="listClick(item)"
|
|
:class="{ active: item.id == projectClassificationID }"
|
|
>
|
|
<i class="el-icon-folder"></i>
|
|
<div class="classifyName" flex>
|
|
<p>{{ item.name }}</p>
|
|
</div>
|
|
<div class="treeItemBtn" v-if="item.id != '1'">
|
|
<el-button
|
|
type="text"
|
|
size="mini"
|
|
icon="el-icon-edit"
|
|
@click.stop="editProjectClassification(item)"
|
|
style="color: #333"
|
|
>
|
|
</el-button>
|
|
<el-button
|
|
type="text"
|
|
size="mini"
|
|
icon="el-icon-delete"
|
|
@click.stop="deleteProjectClassification(item)"
|
|
style="color: #ff3b30"
|
|
>
|
|
</el-button>
|
|
<el-button
|
|
type="text"
|
|
size="mini"
|
|
icon="el-icon-coordinate"
|
|
@click.stop="permissionProjectClassification(item)"
|
|
style="color: #333"
|
|
>
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</base-layout>
|
|
<layout-new
|
|
ref="layoutNew"
|
|
@pageChange="pageChange"
|
|
:showTitle="false"
|
|
@onFuncBtn="getFuncBtn"
|
|
:defaultButtonList="defaultButtonList"
|
|
:fixedButtonList="fixedButtonList"
|
|
:fixedButton="false"
|
|
@onFixedBtn="onFixedBtn"
|
|
:isPage="listSwitchState"
|
|
>
|
|
<div
|
|
slot="main"
|
|
slot-scope="{ tableHeight }"
|
|
style="height: 100%; padding: 0 10px"
|
|
>
|
|
<!-- 列表显示模式和豆腐块显示模式-->
|
|
<template v-if="listSwitchState">
|
|
<base-table
|
|
ref="customtable"
|
|
:border="true"
|
|
:showIndex="true"
|
|
:tableHeight="tableHeight"
|
|
:tableData="tableData"
|
|
:tableColumn="tableColumn"
|
|
:slotrow="false"
|
|
>
|
|
<!-- 触发方式 -->
|
|
<template #triggerModeId="{ row }">
|
|
<div v-if="row.triggerModeId == 2">定时触发</div>
|
|
<div v-else-if="row.triggerModeId == 1">应用程序触发</div>
|
|
<div v-else-if="row.triggerModeId == 3">手动触发</div>
|
|
<div v-else-if="row.triggerModeId == 4">Webhook触发</div>
|
|
</template>
|
|
<!-- 发布状态 -->
|
|
<template #isPublic="{ row }">
|
|
<div
|
|
style="
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
"
|
|
>
|
|
<div
|
|
class="label_class"
|
|
:style="{
|
|
'border-color': itemColor4(row) + '!important',
|
|
color: itemColor(row),
|
|
backgroundColor: itemColor2(row),
|
|
}"
|
|
>
|
|
{{ itemText(row) }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template #operate="{ row }">
|
|
<el-tooltip
|
|
class="item"
|
|
effect="dark"
|
|
content="配置"
|
|
placement="top"
|
|
>
|
|
<i
|
|
class="el-icon-setting"
|
|
style="
|
|
color: #000;
|
|
font-size: 12px;
|
|
padding: 5px;
|
|
background-color: #ebebeb;
|
|
border-radius: 4px;
|
|
margin-right: 2px;
|
|
"
|
|
@click="settingHandle(row)"
|
|
/>
|
|
</el-tooltip>
|
|
<el-tooltip
|
|
class="item"
|
|
effect="dark"
|
|
content="删除当前行"
|
|
placement="top"
|
|
>
|
|
<i
|
|
class="el-icon-delete"
|
|
style="
|
|
color: red;
|
|
font-size: 12px;
|
|
margin-left: 2px;
|
|
padding: 5px;
|
|
background-color: #ebebeb;
|
|
border-radius: 4px;
|
|
margin-right: 2px;
|
|
"
|
|
@click="deleChunkData(row)"
|
|
/>
|
|
</el-tooltip>
|
|
<el-tooltip
|
|
class="item"
|
|
effect="dark"
|
|
content="查看"
|
|
placement="top"
|
|
>
|
|
<i
|
|
class="el-icon-view"
|
|
style="
|
|
color: #000;
|
|
font-size: 12px;
|
|
padding: 5px;
|
|
margin-left: 2px;
|
|
background-color: #ebebeb;
|
|
border-radius: 4px;
|
|
"
|
|
@click="viewChunkData(row)"
|
|
/>
|
|
</el-tooltip>
|
|
</template>
|
|
</base-table>
|
|
</template>
|
|
<template v-else>
|
|
<div class="diamondChunk" ref="workBox">
|
|
<div class="diamondList">
|
|
<div
|
|
class="diamondItem"
|
|
v-for="(item, index) in tableData"
|
|
:key="index"
|
|
:style="'max-width:' + listMaxWidth + 'px'"
|
|
style="position: relative"
|
|
>
|
|
<div class="tableInfo">
|
|
<div class="leftAva">
|
|
<template>
|
|
<div class="imgBox">
|
|
<img
|
|
src="./images/pingtai.svg"
|
|
v-if="item.triggerModeId == 2"
|
|
/>
|
|
<img
|
|
src="./images/naozhong.svg"
|
|
v-else-if="item.triggerModeId == 1"
|
|
/>
|
|
<img
|
|
src="./images/api.svg"
|
|
v-else-if="item.triggerModeId == 4"
|
|
/>
|
|
<img
|
|
src="./images/point.svg"
|
|
v-else-if="item.triggerModeId == 3"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<div class="middleBox">
|
|
<i
|
|
class="el-icon-caret-right caretBox"
|
|
v-if="item.stepCount && item.stepCount >= 0"
|
|
></i>
|
|
<div class="caretCount" v-if="item.stepCount > 0">
|
|
{{ "+" + item.stepCount }}
|
|
</div>
|
|
<i
|
|
class="el-icon-caret-right caretBox"
|
|
v-if="item.stepCount > 0 || item.lastAppIconUrl"
|
|
></i>
|
|
</div>
|
|
|
|
<template
|
|
v-if="
|
|
item.lastAppIconUrl && item.lastAppIconUrl != null
|
|
"
|
|
>
|
|
<div class="lastAppImg">
|
|
<img
|
|
:src="
|
|
item.lastAppIconUrl
|
|
? item.lastAppIconUrl.split('/wwwroot')[1]
|
|
: ''
|
|
"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<template
|
|
v-if="!item.lastAppIconUrl && item.stepCount >= 0"
|
|
>
|
|
<i class="el-icon-caret-right caretBox"></i>
|
|
<div class="imgBox">
|
|
<img src="./images/huaO.svg" />
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<div class="ruler" style="margin-top: 10px">
|
|
<!-- 场景名称 -->
|
|
<div class="value" style="font-weight: bold">
|
|
{{ item.name }}
|
|
</div>
|
|
</div>
|
|
<div class="ruler">
|
|
<!-- 场景描述 -->
|
|
<div class="value" style="color: #999999">
|
|
{{ item.description }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
style="
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 20px;
|
|
"
|
|
>
|
|
<div
|
|
class="label_class"
|
|
:style="{
|
|
'border-color': itemColor4(item) + '!important',
|
|
color: itemColor(item),
|
|
backgroundColor: itemColor2(item),
|
|
}"
|
|
>
|
|
{{ itemText(item) }}
|
|
</div>
|
|
</div>
|
|
<div class="shadowBox">
|
|
<div @click="settingHandle(item)">
|
|
<div class="icon">
|
|
<i class="el-icon-setting"></i>
|
|
</div>
|
|
<div class="iconname">配置</div>
|
|
</div>
|
|
<div @click="deleChunkData(item)">
|
|
<div class="icon">
|
|
<i class="el-icon-delete" style="color: red"></i>
|
|
</div>
|
|
<div class="iconname" style="color: red">删除</div>
|
|
</div>
|
|
<div @click="viewChunkData(item)">
|
|
<div class="icon">
|
|
<i class="el-icon-view"></i>
|
|
</div>
|
|
<div class="iconname">查看</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div slot="fixedButton" style="margin-left: 10px">
|
|
<div class="iconSwitchBox">
|
|
<div
|
|
class="iconSwitch"
|
|
:style="{ background: !listSwitchState ? '#fff' : '#f5f5f5' }"
|
|
@click="onFixedBtn(false)"
|
|
>
|
|
<span class="icon el-icon-menu"></span>
|
|
</div>
|
|
<div
|
|
class="iconSwitch"
|
|
:style="{ background: listSwitchState ? '#fff' : '#f5f5f5' }"
|
|
@click="onFixedBtn(true)"
|
|
>
|
|
<span class="icon el-icon-tickets"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div slot="searchListNew" style="display: flex; padding: 0 5px">
|
|
<el-input
|
|
v-model="searchObj.name"
|
|
placeholder="场景名称"
|
|
clearable
|
|
style="width: 200px; margin-right: 10px"
|
|
@keydown.native.enter="searchhanlde"
|
|
></el-input>
|
|
<el-select
|
|
v-model="searchObj.triggerModeId"
|
|
@change="searchhanlde"
|
|
placeholder="请选择触发方式"
|
|
clearable
|
|
>
|
|
<el-option
|
|
v-for="(item, index) in triggerModeOptions"
|
|
:key="index"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
</layout-new>
|
|
</div>
|
|
<addSence ref="addSence" @examineHandleClose="resetTable"></addSence>
|
|
<projectClassificationRightDialog
|
|
ref="projectClassificationRightDialog"
|
|
@resetTable="resetAll"
|
|
></projectClassificationRightDialog>
|
|
<authorizationDialog
|
|
ref="authorizationDialog"
|
|
@resetTable="resetAll"
|
|
></authorizationDialog>
|
|
<addDialogChunk
|
|
ref="addDialogChunk"
|
|
@examineHandleClose="resetTable"
|
|
></addDialogChunk>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import baseLayout from "@/components/base/baseLayout";
|
|
import baseTable from "@/components/base/baseTable";
|
|
import layoutNew from "./compoment/baseLayout";
|
|
import { authApi } from "@/api/apis/auth";
|
|
import configData from "./configData";
|
|
import { dynamicWidth, dynamicHeight } from "@/utils/util.js";
|
|
import addSence from "@/views/LinkUp/compoment/addSence.vue";
|
|
import projectClassificationRightDialog from "@/views/projectClassification/rightDialog.vue";
|
|
import authorizationDialog from "@/views/projectClassification/authorizationDialog.vue";
|
|
import addDialogChunk from "./compoment/addDialogChunk.vue";
|
|
export default {
|
|
components: {
|
|
baseLayout,
|
|
layoutNew,
|
|
baseTable,
|
|
addSence,
|
|
projectClassificationRightDialog,
|
|
authorizationDialog,
|
|
addDialogChunk,
|
|
},
|
|
data() {
|
|
return {
|
|
maskLoading: false,
|
|
classifyList: [],
|
|
projectClassificationID: "", //项目分类id
|
|
listMaxWidth: 0,
|
|
listSwitchState: true,
|
|
tableData: [],
|
|
tableColumn: configData.tableColumn,
|
|
pageModel: {
|
|
page: 1,
|
|
limit: 20,
|
|
total: "",
|
|
},
|
|
searchObj: {
|
|
name: "",
|
|
triggerModeId: "",
|
|
},
|
|
triggerModeOptions: [
|
|
{ label: "应用程序触发", value: 1 },
|
|
{ label: "定时触发", value: 2 },
|
|
{ label: "手动触发", value: 3 },
|
|
{ label: "Webhook触发", value: 4 },
|
|
],
|
|
};
|
|
},
|
|
computed: {
|
|
fixedButtonList() {
|
|
if (this.listSwitchState) {
|
|
return [
|
|
{
|
|
icon: "el-icon-menu",
|
|
title: "切换",
|
|
},
|
|
];
|
|
} else {
|
|
return [
|
|
{
|
|
icon: "el-icon-s-data",
|
|
title: "切换",
|
|
},
|
|
];
|
|
}
|
|
},
|
|
defaultButtonList() {
|
|
// const containsAddOperate = this.BtnListData.some(
|
|
// (item) => item.nameCN === "新增"
|
|
// );
|
|
// if (containsAddOperate) {
|
|
return [
|
|
{
|
|
icon: "el-icon-plus",
|
|
menuName: "新增",
|
|
},
|
|
];
|
|
// } else {
|
|
// return [];
|
|
// }
|
|
},
|
|
},
|
|
mounted() {
|
|
this.openLoading("detail");
|
|
this.$refs.layoutNew.pageClear();
|
|
this.GetProductionTableData();
|
|
this.getTableData();
|
|
},
|
|
methods: {
|
|
// 新增项目分类
|
|
classifyFuncBtn() {
|
|
this.$refs.projectClassificationRightDialog.openDialog("add");
|
|
},
|
|
// 编辑项目分类
|
|
editProjectClassification(row) {
|
|
this.openLoading("detail");
|
|
this.$refs.projectClassificationRightDialog.openDialog("edit", row);
|
|
},
|
|
// 删除项目分类
|
|
deleteProjectClassification(row) {
|
|
this.$delConfirm().then(() => {
|
|
this.openLoading("del");
|
|
this.productionDeleteById(row.id);
|
|
});
|
|
},
|
|
async productionDeleteById(id) {
|
|
let param = {
|
|
id: id,
|
|
};
|
|
let res = await authApi(
|
|
"sysFlowClassService",
|
|
"",
|
|
"deleteFlowClass",
|
|
"",
|
|
param
|
|
);
|
|
if (res.status == "200") {
|
|
this.$vmNews("删除成功", "success");
|
|
this.resetAll();
|
|
}
|
|
},
|
|
permissionProjectClassification(row) {
|
|
this.$refs.authorizationDialog.openDialog(row);
|
|
},
|
|
resetAll() {
|
|
this.pageModel.page = 1;
|
|
this.projectClassificationID = "";
|
|
this.$refs.layoutNew.pageClear();
|
|
this.GetProductionTableData();
|
|
this.getTableData();
|
|
},
|
|
// 获取项目分类
|
|
async GetProductionTableData() {
|
|
let param = {};
|
|
let res = await authApi(
|
|
"sysFlowClassService",
|
|
"",
|
|
"queryListJson",
|
|
"",
|
|
param
|
|
);
|
|
if (res.status == "200") {
|
|
this.classifyList = res.attribute;
|
|
this.classifyList.unshift({
|
|
id: "1",
|
|
name: "全部分类",
|
|
});
|
|
}
|
|
},
|
|
// 点击左侧
|
|
listClick(item) {
|
|
this.projectClassificationID = item.id;
|
|
this.getTableData();
|
|
},
|
|
// 查询、筛选事件
|
|
pageChange(model) {
|
|
this.pageModel.page = model.page;
|
|
this.pageModel.limit = model.limit;
|
|
this.$refs.customtable.clearRadioIndex();
|
|
this.getTableData();
|
|
},
|
|
// 按钮点击事件
|
|
getFuncBtn(btnEven) {
|
|
if (btnEven.menuName == "新增") {
|
|
this.$refs.addDialogChunk.openDialog(
|
|
"-4252471217359269890",
|
|
"3-33003",
|
|
"add",
|
|
3
|
|
);
|
|
|
|
// this.$refs.addSence.openDialog("", "add", this.projectClassificationID);
|
|
}
|
|
},
|
|
//hyt 2024/08/14 切换豆腐块
|
|
onFixedBtn(flag) {
|
|
this.$refs.layoutNew.pageClear();
|
|
this.pageModel.page = 1;
|
|
this.listSwitchState = flag;
|
|
if (!this.listSwitchState) {
|
|
this.pageModel.limit = 9999;
|
|
localStorage.setItem("listSwitchState", "true");
|
|
} else {
|
|
this.pageModel.limit = 20;
|
|
localStorage.removeItem("listSwitchState");
|
|
}
|
|
this.getTableData();
|
|
},
|
|
//配置方法
|
|
settingHandle(row) {
|
|
this.$refs.addDialogChunk.openDialog(
|
|
row.id,
|
|
row.name,
|
|
"edit",
|
|
row.triggerModeId
|
|
);
|
|
},
|
|
// 查看
|
|
viewChunkData(row) {
|
|
this.$refs.viewDialogChunk.openDialog(
|
|
row.sceneID,
|
|
row.sceneName,
|
|
row.triggerMode,
|
|
row
|
|
);
|
|
},
|
|
// 豆腐块删除事件
|
|
deleChunkData(item) {
|
|
this.$delConfirm().then((res) => {
|
|
let params = {
|
|
id: item.id,
|
|
};
|
|
this.deleteSence(params);
|
|
});
|
|
},
|
|
async deleteSence(params) {
|
|
let res = await authApi("sysFlowService", "", "deleteFlow", "", params);
|
|
|
|
if (res.status == "200") {
|
|
this.$vmNews("删除成功！", "success");
|
|
this.resetTable();
|
|
}
|
|
},
|
|
resetTable() {
|
|
this.pageModel.page = 1;
|
|
this.getTableData();
|
|
this.$nextTick(() => {
|
|
this.$refs.layoutNew.setPageNum(1);
|
|
});
|
|
},
|
|
searchhanlde() {
|
|
this.pageModel.page = 1;
|
|
if (this.listSwitchState) {
|
|
this.$refs.layoutNew.pageClear();
|
|
}
|
|
this.getTableData();
|
|
},
|
|
// 获得表格数据
|
|
async getTableData() {
|
|
this.maskLoading = true;
|
|
let params = {
|
|
...this.searchObj,
|
|
pageNum: this.pageModel.page,
|
|
pageSize: this.pageModel.limit,
|
|
classId: this.projectClassificationID,
|
|
};
|
|
if (params.classId == "1") {
|
|
params.classId = "";
|
|
}
|
|
setTimeout(() => {
|
|
this.maskLoading = false;
|
|
}, 20000);
|
|
let res = await authApi(
|
|
"sysFlowService",
|
|
"",
|
|
"queryFlowPagedInfo",
|
|
"",
|
|
params
|
|
);
|
|
|
|
if (res.status == "200") {
|
|
this.$nextTick(() => {
|
|
this.$refs.layoutNew.setPageTotal(res.attribute.total);
|
|
this.pageModel.total = res.attribute.total;
|
|
});
|
|
this.tableData = res.attribute.list;
|
|
this.maskLoading = false;
|
|
this.$nextTick(() => {
|
|
this.watchSize();
|
|
});
|
|
}
|
|
},
|
|
watchSize() {
|
|
if (!this.listSwitchState) {
|
|
let boxWidth = this.$refs.workBox.offsetWidth - 6;
|
|
let listMaxWidth = dynamicWidth(boxWidth, 400, 10);
|
|
this.listMaxWidth = listMaxWidth;
|
|
}
|
|
},
|
|
itemColor(val) {
|
|
if (val.isPublic == 1) {
|
|
return "#0EA63C";
|
|
} else {
|
|
return "#333";
|
|
}
|
|
},
|
|
itemColor2(val) {
|
|
if (val.isPublic == 1) {
|
|
return "#f9fdf0";
|
|
} else {
|
|
return "#f4f4f4";
|
|
}
|
|
},
|
|
itemColor4(val) {
|
|
if (val.isPublic == 1) {
|
|
return "#0EA63C";
|
|
} else {
|
|
return "#C9C9C9";
|
|
}
|
|
},
|
|
itemText(val) {
|
|
if (val.isPublic == 1) {
|
|
return "已发布";
|
|
} else {
|
|
return "未发布";
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
$activeColor: var(--bg-color, #55aaff);
|
|
|
|
.classifyBox {
|
|
padding: 0.625rem 1.25rem;
|
|
font-size: 0.875rem;
|
|
align-items: center;
|
|
display: flex;
|
|
position: relative;
|
|
i {
|
|
vertical-align: middle;
|
|
}
|
|
.el-icon-folder {
|
|
vertical-align: middle;
|
|
}
|
|
.classifyName {
|
|
margin-left: 0.3125rem;
|
|
}
|
|
.treeItemBtn {
|
|
position: absolute;
|
|
right: 5px;
|
|
display: none;
|
|
}
|
|
&:hover {
|
|
.treeItemBtn {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
.classifyBox:hover {
|
|
background-color: rgb(238, 245, 254);
|
|
cursor: pointer;
|
|
// text-decoration: underline;
|
|
}
|
|
|
|
.classifyBox.active {
|
|
background-color: rgb(238, 245, 254);
|
|
}
|
|
|
|
.fenlei {
|
|
width: 260px;
|
|
min-width: 260px;
|
|
border-right: 1px solid #ededed;
|
|
padding-right: 5px;
|
|
position: relative;
|
|
}
|
|
|
|
// -----------------------
|
|
.labelStateName {
|
|
padding: 2px 8px;
|
|
border-radius: 2px;
|
|
color: #fff;
|
|
background: #3876ee;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
> .el-dialog--center .el-dialog__body {
|
|
padding-top: 0 !important;
|
|
}
|
|
|
|
.diamondChunk {
|
|
height: calc(100vh - 140px);
|
|
overflow: auto;
|
|
|
|
.diamondList {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
.diamondItem {
|
|
min-width: 400px;
|
|
height: 160px;
|
|
border-radius: 8px;
|
|
border: 1px solid #e5e5e5;
|
|
margin: 10px 5px;
|
|
padding: 20px 10px;
|
|
position: relative;
|
|
flex: 1;
|
|
|
|
.tableInfo {
|
|
display: flex;
|
|
//align-items: center;
|
|
justify-content: flex-start;
|
|
|
|
.leftAva {
|
|
// width: 44px;
|
|
// height: 44px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
}
|
|
.lastAppImg {
|
|
width: 44px;
|
|
height: 44px;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.caretBox {
|
|
color: #d8d8d8;
|
|
margin-right: 10px;
|
|
}
|
|
.imgBox {
|
|
margin-right: 10px;
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid #f18709;
|
|
|
|
img {
|
|
width: 60%;
|
|
height: 60%;
|
|
}
|
|
}
|
|
|
|
.rightInfo {
|
|
flex: 1;
|
|
margin-left: 15px;
|
|
|
|
.infotitle {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 18px;
|
|
color: #333;
|
|
align-items: center;
|
|
|
|
.text {
|
|
display: -webkit-box;
|
|
/*作为弹性伸缩盒子模型显示。*/
|
|
-webkit-box-orient: vertical;
|
|
/*作为弹性伸缩盒子模型显示。*/
|
|
-webkit-line-clamp: 1; //*显示的行*/
|
|
overflow: hidden;
|
|
/*溢出隐藏*/
|
|
/* 对于连字情况或者纯字母，可以解决 */
|
|
word-break: break-all;
|
|
max-width: 100px;
|
|
}
|
|
|
|
.classify {
|
|
margin-left: 10px;
|
|
height: 16px;
|
|
background: #fff;
|
|
border-radius: 2px;
|
|
font-size: 12px;
|
|
color: #ff8b0f;
|
|
text-align: center;
|
|
border: 1px solid #ff8b0f;
|
|
padding: 0 2px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 30px;
|
|
max-width: 100px;
|
|
}
|
|
}
|
|
|
|
.switchList {
|
|
margin-top: 9px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
> div {
|
|
color: #999;
|
|
font-size: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
|
|
.littletitle {
|
|
width: 60px;
|
|
text-align: right;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.value {
|
|
flex: 1;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
flex: 0.7;
|
|
}
|
|
}
|
|
}
|
|
|
|
.infoChunk {
|
|
margin-top: 9px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
> div {
|
|
color: #999;
|
|
font-size: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
|
|
.littletitle {
|
|
width: 60px;
|
|
text-align: right;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.value {
|
|
flex: 1;
|
|
display: -webkit-box;
|
|
/*作为弹性伸缩盒子模型显示。*/
|
|
-webkit-box-orient: vertical;
|
|
/*作为弹性伸缩盒子模型显示。*/
|
|
-webkit-line-clamp: 1; //*显示的行*/
|
|
overflow: hidden;
|
|
/*溢出隐藏*/
|
|
/* 对于连字情况或者纯字母，可以解决 */
|
|
word-break: break-all;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
flex: 0.7;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ruler {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
margin-top: 5px;
|
|
|
|
.rulerTitle {
|
|
width: 60px;
|
|
color: #999;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.value {
|
|
flex: 1;
|
|
color: #333;
|
|
display: -webkit-box;
|
|
/*作为弹性伸缩盒子模型显示。*/
|
|
-webkit-box-orient: vertical;
|
|
/*作为弹性伸缩盒子模型显示。*/
|
|
-webkit-line-clamp: 2; //*显示的行*/
|
|
overflow: hidden;
|
|
/*溢出隐藏*/
|
|
/* 对于连字情况或者纯字母，可以解决 */
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
|
|
.functionContent {
|
|
display: flex;
|
|
font-size: 14px;
|
|
margin-top: 5px;
|
|
|
|
.functionTitle {
|
|
width: 60px;
|
|
color: #999;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.value {
|
|
flex: 1;
|
|
color: #333;
|
|
display: -webkit-box;
|
|
/*作为弹性伸缩盒子模型显示。*/
|
|
-webkit-box-orient: vertical;
|
|
/*作为弹性伸缩盒子模型显示。*/
|
|
-webkit-line-clamp: 2; //*显示的行*/
|
|
overflow: hidden;
|
|
/*溢出隐藏*/
|
|
/* 对于连字情况或者纯字母，可以解决 */
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
|
|
.shadowBox {
|
|
display: none;
|
|
width: 100%;
|
|
height: 80px;
|
|
background: #000000;
|
|
border-radius: 0px 0px 8px 8px;
|
|
opacity: 0.7;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
|
|
> div {
|
|
.icon {
|
|
font-size: 22px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.shadowBox {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
> div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
margin: 0 10%;
|
|
|
|
.iconname {
|
|
margin-top: 7px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.middleBox {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.caretCount {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
margin-right: 10px;
|
|
background: #f2f2f2;
|
|
color: #333333;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
.switchList {
|
|
margin-top: 9px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
> div {
|
|
color: #999;
|
|
font-size: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
|
|
.littletitle {
|
|
width: 60px;
|
|
text-align: right;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.value {
|
|
flex: 1;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
flex: 0.7;
|
|
}
|
|
}
|
|
}
|
|
|
|
.switchListTwo {
|
|
margin-top: 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
> div {
|
|
color: #999;
|
|
font-size: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.littletitle {
|
|
text-align: left;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.value {
|
|
}
|
|
}
|
|
}
|
|
|
|
.textChunk {
|
|
display: -webkit-box;
|
|
/*作为弹性伸缩盒子模型显示。*/
|
|
-webkit-box-orient: vertical;
|
|
/*作为弹性伸缩盒子模型显示。*/
|
|
-webkit-line-clamp: 1; //*显示的行*/
|
|
overflow: hidden;
|
|
/*溢出隐藏*/
|
|
/* 对于连字情况或者纯字母，可以解决 */
|
|
word-break: break-all;
|
|
max-width: 100px;
|
|
}
|
|
|
|
.classify {
|
|
margin-left: 5px;
|
|
height: 16px;
|
|
background: #fff;
|
|
border-radius: 2px;
|
|
font-size: 12px;
|
|
color: #ff8b0f;
|
|
text-align: center;
|
|
border: 1px solid #ff8b0f;
|
|
padding: 0 2px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 30px;
|
|
max-width: 100px;
|
|
}
|
|
|
|
/* 切换图标样式 */
|
|
.iconSwitchBox {
|
|
width: 60px;
|
|
height: 32px;
|
|
border-radius: 4px;
|
|
background-color: #f5f5f5;
|
|
padding: 2px;
|
|
display: flex !important;
|
|
align-items: center;
|
|
font-size: 12px !important;
|
|
|
|
.iconfont {
|
|
font-size: 12px !important;
|
|
}
|
|
}
|
|
|
|
.iconSwitch {
|
|
width: 50%;
|
|
border-radius: 3px;
|
|
text-align: center;
|
|
height: 100%;
|
|
line-height: 28px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 标签统一样式 */
|
|
.label_class {
|
|
height: 22px !important;
|
|
line-height: 22px !important;
|
|
padding: 0 7px !important;
|
|
font-size: 12px !important;
|
|
border: 1px solid;
|
|
border-radius: 4px !important;
|
|
box-sizing: border-box !important;
|
|
overflow: hidden;
|
|
width: max-content !important;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.addBtn {
|
|
position: absolute;
|
|
background: #f5f5f5;
|
|
|
|
top: 18px;
|
|
right: 13px;
|
|
border-radius: 4px;
|
|
padding: 3px 5px;
|
|
font-weight: bold;
|
|
|
|
i {
|
|
font-size: 16px;
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
</style> |