|
|
@@ -1,163 +1,216 @@
|
|
|
<template>
|
|
|
- <basic-container>
|
|
|
- <div>
|
|
|
- <div class="pd-b-20 border-grey-b header-box">
|
|
|
- <div>
|
|
|
- <span class="mg-r-10">选择项目名称</span>
|
|
|
- <el-select
|
|
|
- v-model="projectId"
|
|
|
- @change="projectChange"
|
|
|
- placeholder="请选择"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in projectList"
|
|
|
- :key="item.id"
|
|
|
- :label="item.projectAlias"
|
|
|
- :value="item.id"
|
|
|
- ></el-option>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
-
|
|
|
- <el-button type="primary" @click="syncLedger">同步台账</el-button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="pd-t-20">
|
|
|
- <el-row
|
|
|
- :gutter="20"
|
|
|
- style="height:calc(100vh - 290px)"
|
|
|
- >
|
|
|
- <el-col
|
|
|
- :span="6"
|
|
|
- v-for="(item,index) in projectPageList"
|
|
|
- :key="item.id"
|
|
|
- style="height:20%;"
|
|
|
- class="mg-b-20 box-size-bb"
|
|
|
- >
|
|
|
- <el-card
|
|
|
- @click.native="projectClick(item)"
|
|
|
- class="box-card h-100p flex flex-center project_name"
|
|
|
- :class="getBg(index)"
|
|
|
- >
|
|
|
- {{item.projectAlias}}
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <el-pagination
|
|
|
- layout="prev, pager, next"
|
|
|
- class="text-align-c"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- :current-page.sync="page.currentPage"
|
|
|
- :total="page.total"
|
|
|
- :page-size="page.pageSize"
|
|
|
- >
|
|
|
- </el-pagination>
|
|
|
- </div>
|
|
|
+
|
|
|
+ <el-container class="pro-container">
|
|
|
+ <el-header class="search-box">
|
|
|
+ <div class="search-box-item-title">
|
|
|
+ <el-input v-model="searchForm.name" placeholder="请输入内容" clearable size="small"></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="ml-10">
|
|
|
+ <el-button type="primary" @click="searchChange" class="custom-primary-btn" size="small">查询</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="ml-10">
|
|
|
+ <el-select v-model="searchForm.type" placeholder="项目状态" style="width: 120px;" size="small">
|
|
|
+ <el-option
|
|
|
+ v-for="item in typeOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="ml-10">
|
|
|
+ <el-select v-model="searchForm.type" placeholder="默认排序" style="width: 120px;" size="small">
|
|
|
+ <el-option
|
|
|
+ v-for="item in sortOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="ml-10">
|
|
|
+ <el-button type="warning" icon="el-icon-sort" size="small">排序</el-button>
|
|
|
</div>
|
|
|
+ <div class="ml-10">
|
|
|
+ <el-button type="warning" icon="el-icon-star-off" size="small" class="custom-primary-btn">收藏夹</el-button>
|
|
|
+ </div>
|
|
|
+ </el-header>
|
|
|
+
|
|
|
+ <el-main class="main-box">
|
|
|
+ <div class="project-list-container">
|
|
|
+
|
|
|
+ <el-card class="project-card" shadow="hover" v-for="item in projectPageList"
|
|
|
+ :key="item.id">
|
|
|
+ <div class="project-top">
|
|
|
+ <div class="project-tag">
|
|
|
+ <el-tag
|
|
|
+ size="small"
|
|
|
+ v-for="item in tagItems"
|
|
|
+ :key="item.label"
|
|
|
+ :type="item.type"
|
|
|
+ effect="dark"
|
|
|
+ class="mr-3 custom-ellipse-tag"
|
|
|
+ :class="`custom-tag-type-${item.type}`"
|
|
|
+ >
|
|
|
+ <i class=" el-icon-success"></i>
|
|
|
+ {{ item.label }}
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
+ <div class="project-like">
|
|
|
+ <i class="el-icon-star-on" v-if="item.isLiked" @click="toggleLike(item)"></i>
|
|
|
+ <i class="el-icon-star-off" v-else></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="project-title" >
|
|
|
+ <el-tooltip
|
|
|
+ v-if="item.projectAlias.length > 20"
|
|
|
+ :content="item.projectAlias"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <span>{{ item.projectAlias }}</span>
|
|
|
+ </el-tooltip>
|
|
|
+ <span v-else>{{ item.projectAlias }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="project-info">
|
|
|
+ <div><span class="info-label"><i class="el-icon-user"></i>负责人：</span>李田</div>
|
|
|
+ <div><span class="info-label"><i class="el-icon-edit-outline"></i>电签类别：</span>安心签</div>
|
|
|
+ <div><span class="info-label"><i class="el-icon-coordinate"></i>电签方式：</span>流程审批</div>
|
|
|
+ </div>
|
|
|
+ <div class="project-actions">
|
|
|
+ <el-link type="primary" size="small" @click="projectClick(item)">
|
|
|
+
|
|
|
+ 查看详情 <i class="el-icon-right"></i>
|
|
|
+ </el-link>
|
|
|
+
|
|
|
+ <el-tag size="small" type="danger" class="custom-ellipse-tag1" >进行中</el-tag>
|
|
|
|
|
|
- <el-dialog
|
|
|
- title="项目信息"
|
|
|
- :visible.sync="projectVisible"
|
|
|
- width="900px"
|
|
|
- append-to-body
|
|
|
- >
|
|
|
- <div class="mg-b-10"><span class="flex1 mg-r-20">{{curProjiect.projectName}}</span></div>
|
|
|
- <div class="flex jc-sb pd-b-10">
|
|
|
- <span></span>
|
|
|
- <div>
|
|
|
- <el-button
|
|
|
- size="small"
|
|
|
- @click="measureTree"
|
|
|
- style="background-color: #626aef;color: white;"
|
|
|
- >计量管理</el-button>
|
|
|
- <el-button
|
|
|
- size="small"
|
|
|
- @click="splitTree"
|
|
|
- type="success"
|
|
|
- >征拆划分</el-button>
|
|
|
- <el-button
|
|
|
- size="small"
|
|
|
- @click="testTree"
|
|
|
- type="success"
|
|
|
- >试验划分</el-button>
|
|
|
- <el-button
|
|
|
- size="small"
|
|
|
- @click="editTree"
|
|
|
- type="success"
|
|
|
- >WBS树管理</el-button>
|
|
|
- <el-button
|
|
|
- size="small"
|
|
|
- @click="editLogTree"
|
|
|
- type="success"
|
|
|
- >日志WBS树管理</el-button>
|
|
|
- <el-button
|
|
|
- size="small"
|
|
|
- @click="editProject"
|
|
|
- type="primary"
|
|
|
- >编辑项目信息</el-button>
|
|
|
- <el-button
|
|
|
- size="small"
|
|
|
- @click="addContract"
|
|
|
- type="info"
|
|
|
- >创建新合同段</el-button>
|
|
|
- <el-button
|
|
|
- size="small"
|
|
|
- @click="dellProject"
|
|
|
- type="danger"
|
|
|
- >删除项目</el-button>
|
|
|
- <el-button
|
|
|
- style="margin-top: 10px;"
|
|
|
- size="small"
|
|
|
- @click="projectVisible = false"
|
|
|
- >返回</el-button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- style="height:400px;overflow: auto;"
|
|
|
- v-if="contractList.length > 0"
|
|
|
- >
|
|
|
- <el-card
|
|
|
- shadow="never"
|
|
|
- v-for="(item,index) in contractList"
|
|
|
- :key="item.id"
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 其他项目卡片... -->
|
|
|
+ </div>
|
|
|
+ </el-main>
|
|
|
+
|
|
|
+ <el-footer class="footer-box">
|
|
|
+ <el-pagination
|
|
|
+ layout="prev, pager, next"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page.sync="page.currentPage"
|
|
|
+ :total="page.total"
|
|
|
+ :page-size="page.pageSize"
|
|
|
+ class="transparent-pagination"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </el-footer>
|
|
|
+
|
|
|
+ <!-- 项目信息 -->
|
|
|
+ <el-dialog
|
|
|
+ title="项目信息"
|
|
|
+ :visible.sync="projectVisible"
|
|
|
+ width="900px"
|
|
|
+ append-to-body
|
|
|
>
|
|
|
- <div class="flex jc-sb">
|
|
|
- <div class="flex jc-al-c flex1">
|
|
|
- <el-avatar
|
|
|
- :size="50"
|
|
|
- :class="getAvatarBg(item.contractType)"
|
|
|
- >{{getFont(item.contractType)}}</el-avatar>
|
|
|
- <span class="mg-l-10 flex1 mg-r-10">{{item.contractName}}</span>
|
|
|
- </div>
|
|
|
- <div class="flex jc-al-c">
|
|
|
- <el-link
|
|
|
+ <div class="mg-b-10"><span class="flex1 mg-r-20">{{curProjiect.projectName}}</span></div>
|
|
|
+ <div class="flex jc-sb pd-b-10">
|
|
|
+ <span></span>
|
|
|
+ <div>
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ @click="measureTree"
|
|
|
+ style="background-color: #626aef;color: white;"
|
|
|
+ >计量管理</el-button>
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ @click="splitTree"
|
|
|
+ type="success"
|
|
|
+ >征拆划分</el-button>
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ @click="testTree"
|
|
|
+ type="success"
|
|
|
+ >试验划分</el-button>
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ @click="editTree"
|
|
|
+ type="success"
|
|
|
+ >WBS树管理</el-button>
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ @click="editLogTree"
|
|
|
+ type="success"
|
|
|
+ >日志WBS树管理</el-button>
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ @click="editProject"
|
|
|
type="primary"
|
|
|
- @click="editContract(item)"
|
|
|
- >编辑合同段信息</el-link>
|
|
|
- <el-link
|
|
|
- type="primary"
|
|
|
- class="mg-l-10"
|
|
|
- v-if="item.contractType==1"
|
|
|
- @click="contractDetail(item,'2',item.contractType)"
|
|
|
- >分配WBS</el-link>
|
|
|
- <el-link
|
|
|
- type="primary"
|
|
|
- class="mg-l-10"
|
|
|
- @click="delContract(item,index)"
|
|
|
- >删除</el-link>
|
|
|
+ >编辑项目信息</el-button>
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ @click="addContract"
|
|
|
+ type="info"
|
|
|
+ >创建新合同段</el-button>
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ @click="dellProject"
|
|
|
+ type="danger"
|
|
|
+ >删除项目</el-button>
|
|
|
+ <el-button
|
|
|
+ style="margin-top: 10px;"
|
|
|
+ size="small"
|
|
|
+ @click="projectVisible = false"
|
|
|
+ >返回</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </el-card>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="text-align-c pd-t-20"
|
|
|
- v-else
|
|
|
- >
|
|
|
- 暂无合同段，请先创建合同段
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
- </basic-container>
|
|
|
+ <div
|
|
|
+ style="height:400px;overflow: auto;"
|
|
|
+ v-if="contractList.length > 0"
|
|
|
+ >
|
|
|
+ <el-card
|
|
|
+ shadow="never"
|
|
|
+ v-for="(item,index) in contractList"
|
|
|
+ :key="item.id"
|
|
|
+ >
|
|
|
+ <div class="flex jc-sb">
|
|
|
+ <div class="flex jc-al-c flex1">
|
|
|
+ <el-avatar
|
|
|
+ :size="50"
|
|
|
+ :class="getAvatarBg(item.contractType)"
|
|
|
+ >{{getFont(item.contractType)}}</el-avatar>
|
|
|
+ <span class="mg-l-10 flex1 mg-r-10">{{item.contractName}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="flex jc-al-c">
|
|
|
+ <el-link
|
|
|
+ type="primary"
|
|
|
+ @click="editContract(item)"
|
|
|
+ >编辑合同段信息</el-link>
|
|
|
+ <el-link
|
|
|
+ type="primary"
|
|
|
+ class="mg-l-10"
|
|
|
+ v-if="item.contractType==1"
|
|
|
+ @click="contractDetail(item,'2',item.contractType)"
|
|
|
+ >分配WBS</el-link>
|
|
|
+ <el-link
|
|
|
+ type="primary"
|
|
|
+ class="mg-l-10"
|
|
|
+ @click="delContract(item,index)"
|
|
|
+ >删除</el-link>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="text-align-c pd-t-20"
|
|
|
+ v-else
|
|
|
+ >
|
|
|
+ 暂无合同段，请先创建合同段
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+</el-container>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -169,6 +222,29 @@ import { getStore, setStore } from "@/util/store";
|
|
|
export default {
|
|
|
data () {
|
|
|
return {
|
|
|
+ showTooltip: false, // 控制 tooltip 显示
|
|
|
+ searchForm: {
|
|
|
+ name: ''
|
|
|
+ },
|
|
|
+ typeOptions:[
|
|
|
+ { value: '1', label: '未开始' },
|
|
|
+ { value: '2', label: '配置中' },
|
|
|
+ { value: '3', label: '进行中' },
|
|
|
+ { value: '4', label: '已完成' },
|
|
|
+ ],
|
|
|
+ sortOptions:[
|
|
|
+ { value: '1', label: '收藏优先' },
|
|
|
+ { value: '2', label: '创建时间' },
|
|
|
+ { value: '3', label: '我负责的' },
|
|
|
+
|
|
|
+ ],
|
|
|
+ tagItems: [
|
|
|
+ { type: '1', label: '质检' },
|
|
|
+ { type: '2', label: '试验' },
|
|
|
+ { type: '3', label: '日志' },
|
|
|
+ { type: '4', label: '计量' },
|
|
|
+ { type: '5', label: '征拆' }
|
|
|
+ ],
|
|
|
projectId: '',
|
|
|
curProjiect: {},
|
|
|
projectList: [],
|
|
|
@@ -179,7 +255,7 @@ export default {
|
|
|
|
|
|
page: {
|
|
|
currentPage: 1,
|
|
|
- pageSize: 16,
|
|
|
+ pageSize: 12,
|
|
|
total: 0
|
|
|
}
|
|
|
}
|
|
|
@@ -196,7 +272,11 @@ export default {
|
|
|
this.getProjectList();
|
|
|
this.getProjectPageList();
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
+ searchChange () {
|
|
|
+ this.page.currentPage = 1;
|
|
|
+ this.getProjectPageList();
|
|
|
+ },
|
|
|
getProjectList () {
|
|
|
getProjectList(1, 999).then((res) => {
|
|
|
this.projectList = res.data.data.records;
|
|
|
@@ -407,38 +487,216 @@ export default {
|
|
|
//同步
|
|
|
syncLedger () {
|
|
|
this.$router.push('/manager/projectinfo/ledger' )
|
|
|
+ },
|
|
|
+ toggleLike(item){
|
|
|
+ item.isLiked = !item.isLiked;
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-.project_name {
|
|
|
- font-size: 20px;
|
|
|
+.pro-container {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .search-box {
|
|
|
+ // padding: 0 !important; /* 取消内边距 */
|
|
|
+ height: auto !important; /* 取消固定高度 */
|
|
|
+ min-height: auto !important; /* 取消最小高度 */
|
|
|
+ display: flex;
|
|
|
+ align-items: center; /* 垂直居中 */
|
|
|
+ flex-wrap: wrap; /* 允许换行 */
|
|
|
+
|
|
|
+ .search-box-item-title {
|
|
|
+ flex: 1; /* 输入框占据剩余空间 */
|
|
|
+ min-width: 200px; /* 最小宽度 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .ml-10 {
|
|
|
+ margin-left: 10px;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .footer-box{
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ align-items: center; /* 垂直居中 */
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 自定义按钮样式 */
|
|
|
+.custom-primary-btn {
|
|
|
+ background-color: #2550A2 !important;
|
|
|
+ border-color: #2550A2 !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 项目列表容器样式 */
|
|
|
+.project-list-container {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
|
|
+ gap: 20px;
|
|
|
+ padding: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 项目卡片样式 */
|
|
|
+.project-card {
|
|
|
cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ border-radius: 8px;
|
|
|
}
|
|
|
-.bg1 {
|
|
|
- background-color: rgb(127, 164, 221);
|
|
|
- border-color: rgb(187, 187, 187);
|
|
|
- box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 6px 0px;
|
|
|
+
|
|
|
+.project-card:hover {
|
|
|
+ transform: translateY(-5px);
|
|
|
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
-.bg2 {
|
|
|
- background-color: rgb(239, 240, 229);
|
|
|
- border-color: rgb(187, 187, 187);
|
|
|
- box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 6px 0px;
|
|
|
+.project-top{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between; /* 左右对齐 */
|
|
|
+ align-items: center; /* 垂直居中 */
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
-.abg1 {
|
|
|
- background-color: rgb(42, 155, 121);
|
|
|
+.project-title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ width: 100%; /* 确保宽度限制 */
|
|
|
}
|
|
|
-.abg2 {
|
|
|
- background-color: rgb(155, 108, 42);
|
|
|
+
|
|
|
+.project-info {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
}
|
|
|
-.abg3 {
|
|
|
- background-color: rgb(42, 53, 155);
|
|
|
+
|
|
|
+.info-label {
|
|
|
+ font-weight: bold;
|
|
|
+ color: #444;
|
|
|
+ display: inline-block;
|
|
|
+ margin-bottom: 5px;
|
|
|
+
|
|
|
}
|
|
|
-.header-box{
|
|
|
+.project-actions{
|
|
|
display: flex;
|
|
|
+ align-items: center;
|
|
|
justify-content: space-between;
|
|
|
- width: 100%;
|
|
|
}
|
|
|
+
|
|
|
+/* 搜索框样式 */
|
|
|
+.search-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 15px;
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ border-bottom: 1px solid #e6e6e6;
|
|
|
+}
|
|
|
+
|
|
|
+.ml-10 {
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+.mr-5 {
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+.mr-3 {
|
|
|
+ margin-right: 3px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 更彻底的透明效果 */
|
|
|
+
|
|
|
</style>
|
|
|
+<style lang="scss">
|
|
|
+/* 完全透明分页样式 */
|
|
|
+.footer-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px 0;
|
|
|
+ background: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+/* 移除所有按钮和页码的背景色 */
|
|
|
+.transparent-pagination .btn-prev,
|
|
|
+.transparent-pagination .btn-next,
|
|
|
+.transparent-pagination .el-pager li {
|
|
|
+ background: transparent !important;
|
|
|
+ border: none !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 移除鼠标悬停时的背景色 */
|
|
|
+.transparent-pagination .btn-prev:hover,
|
|
|
+.transparent-pagination .btn-next:hover,
|
|
|
+.transparent-pagination .el-pager li:hover {
|
|
|
+ background: transparent !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 移除当前选中页的背景色，仅保留文字颜色 */
|
|
|
+.transparent-pagination .el-pager li.active {
|
|
|
+ background: transparent !important;
|
|
|
+ color: #409EFF; /* 选中页的文字颜色 */
|
|
|
+}
|
|
|
+
|
|
|
+/* 移除整个分页组件的背景 */
|
|
|
+.transparent-pagination {
|
|
|
+ background: transparent !important;
|
|
|
+}
|
|
|
+.custom-ellipse-tag {
|
|
|
+ border-radius: 15px !important;
|
|
|
+ padding: 0 8px !important;
|
|
|
+ margin-right: 8px !important;
|
|
|
+ height: 24px;
|
|
|
+ line-height: 24px;
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ color: white !important; /* 文字颜色统一为白色 */
|
|
|
+ border: none !important;
|
|
|
+}
|
|
|
+.custom-ellipse-tag1{
|
|
|
+ border-radius: 15px !important;
|
|
|
+ padding: 0 8px !important;
|
|
|
+ margin-right: 8px !important;
|
|
|
+ height: 24px;
|
|
|
+ line-height: 24px;
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ border: none !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 根据 type 设置背景色 */
|
|
|
+.custom-tag-type-1 {
|
|
|
+ background-color: #3B83F6 !important; /* 质检 - 蓝色 */
|
|
|
+}
|
|
|
+.custom-tag-type-2 {
|
|
|
+ background-color: #A856F8 !important; /* 试验 - 紫色 */
|
|
|
+}
|
|
|
+.custom-tag-type-3 {
|
|
|
+ background-color: #6367F1 !important; /* 日志 - 靛蓝 */
|
|
|
+}
|
|
|
+.custom-tag-type-4 {
|
|
|
+ background-color: #E7B214 !important; /* 计量 - 黄色 */
|
|
|
+}
|
|
|
+.custom-tag-type-5 {
|
|
|
+ background-color: #EC489A !important; /* 征拆 - 粉色 */
|
|
|
+}
|
|
|
+
|
|
|
+/* 图标样式 */
|
|
|
+.custom-ellipse-tag .el-icon-success {
|
|
|
+ margin-right: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 图标样式 */
|
|
|
+.custom-ellipse-tag .el-icon-success {
|
|
|
+ margin-right: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
|
|
+
|
