<template>
|
<div class="datasourcebox">
|
|
<el-tabs v-model="activeName" type="card">
|
<el-tab-pane label="服务中心" name="page1">
|
<el-container>
|
<el-aside style="padding: 0px; width: 400px;height: 100%;">
|
<ResourceMenu @resourceMenuClick="resourceMenuClick" />
|
</el-aside>
|
<el-main style="margin: 0px; padding:0px">
|
<el-card class="box-card">
|
<!--工具栏-->
|
<div style="float: left; width: 100%; ">
|
<el-form :inline="true">
|
<el-form-item>
|
<el-input size="small" placeholder="请输入关键字查询" prefix-icon="el-icon-search" clearable
|
@keyup.enter="handleQuery">
|
</el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button @click="handleShowAddResource" size="small" type="primary">添加数据
|
</el-button>
|
<el-button @click="handleShowShareResource" size="small" type="primary">目录共享
|
</el-button>
|
<el-button @click="deleteResource" size="small" type="primary">删除
|
</el-button>
|
</el-form-item>
|
<el-form-item style="float: right">
|
<el-button @click="showTableStyle()" class="button_box1" size="small">
|
<span title="列表"><i class="el-icon-tickets"></i> </span>
|
</el-button>
|
<el-button @click="showMatixStyle()" class="button_box1" size="small">
|
<span title="矩阵"><i class="el-icon-menu"></i> </span>
|
</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<!--表格树内容栏-->
|
<div style="width: 100%" v-if="showStyle === 1">
|
<el-table border :data="tableTreeDdata" size="mini"
|
style="width: 100%;background: transparent;" @selection-change="handleSelectionChange"
|
rowKey="id">
|
<el-table-column type="selection" width="55"> </el-table-column>
|
<el-table-column prop="name" header-align="center" align="center" label="名称">
|
</el-table-column>
|
<el-table-column prop="type" header-align="center" align="center" width="80" label="类型">
|
</el-table-column>
|
<!-- <el-table-column prop="version" header-align="center" align="center" width="80" label="版本">
|
</el-table-column> -->
|
<el-table-column prop="owner" header-align="center" width="180" align="center"
|
label="所有者">
|
</el-table-column>
|
<el-table-column header-align="center" width="180" align="center" label="CIM等级">
|
<template scope="scope">
|
{{ getCimLevel(scope.row.cimLevel) }}
|
</template>
|
</el-table-column>
|
<el-table-column header-align="center" width="180" align="center" label="分类">
|
<template scope="scope">
|
{{ getDataType(scope.row.dataType) }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="createTime" header-align="center" align="center" label="入库时间"
|
width="255">
|
</el-table-column>
|
<el-table-column header-align="center" align="center" label="操作" width="180"><template
|
slot-scope="scope">
|
<!-- <a href="#" @click="showMeteData(scope.row)"
|
style="margin:5px;color:whitesmoke;cursor:pointer" size="small">查看元数据
|
</a> -->
|
<!-- <el-button type="text" @click="previewData(scope.row)" size="small">预览</el-button> -->
|
<el-button type="text" @click="deleteData(scope.row)"
|
size="small">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<div style="width: 100%; margin: 20px 0px; text-align: center">
|
<el-pagination layout="total, sizes, prev, pager, next, jumper"
|
:page-sizes="[10, 20, 50, 100, 150]" :page-size="20">
|
</el-pagination>
|
</div>
|
</div>
|
</el-card>
|
<el-dialog title="添加数据" :visible.sync="dialogAddDataVisible" :close-on-click-modal="false"
|
:modal="false" class="box-dialog" top="10vh">
|
<add-resource ref="addResourceRef" />
|
<div style="position:absolute;top: 65px;right: 15px;">
|
<el-button size="small" type="success" @click="handleAddResource">确 定</el-button>
|
<el-button size="small" @click="dialogAddDataVisible = false">取 消</el-button>
|
</div>
|
</el-dialog>
|
<el-dialog title="目录共享" :visible.sync="dialogShareVisible" :close-on-click-modal="false"
|
:modal="false" class="box-dialog">
|
<share-resource ref="shareResourceRef" :catalogObject.sync="currentResourceCatalog" />
|
<span slot="footer" class="dialog-footer">
|
<el-button size="small" type="success" @click="handleShareResource">确 定</el-button>
|
<el-button size="small" @click="dialogShareVisible = false">取 消</el-button>
|
</span>
|
</el-dialog>
|
<el-dialog title="预览" :visible.sync="dialogPreviewVisible" class="box-dialog" :modal="false"
|
:close-on-click-modal="false">
|
<preview-service ref="perviewRef"></preview-service>
|
</el-dialog>
|
</el-main>
|
</el-container>
|
</el-tab-pane>
|
<el-tab-pane label="我的申请" name="page2" v-if="this.$store.state.user.roles.indexOf('admin') > -1"
|
class="box-card">
|
<!--工具栏-->
|
<div style="float: left; width: 100%; ">
|
<el-form :inline="true">
|
<el-form-item>
|
<el-button @click="applyServices" size="small" type="primary">申请
|
</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
|
<el-dialog title="服务申请" :visible.sync="applyServicesVisible" class="box-dialog" :modal="false"
|
:close-on-click-modal="false">
|
<el-form :inline="true" size="small" class="form">
|
<el-form-item prop="servicesType" label="资源类型">
|
<el-select size="small" placeholder="请选择" style="width: 100px" v-model="servicesType">
|
<el-option v-for="item in servicesTypeList" :key="item.id" :label="item.name"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button size="small" type="success" @click="handleApplyServices">确 定</el-button>
|
<el-button size="small" @click="applyServicesVisible = false">取 消</el-button>
|
</span>
|
</el-dialog>
|
<el-table border :data="tableTreeDdataApply" size="mini" style="width: 100%;background: transparent;"
|
@selection-change="handleSelectionChange" rowKey="id">
|
<el-table-column type="selection" width="55"> </el-table-column>
|
<el-table-column prop="userName" header-align="center" align="center" width="590px" label="申请人名称">
|
</el-table-column>
|
<el-table-column prop="status" header-align="center" align="center" width="590px" label="审核结果">
|
<template slot-scope="scope">
|
<div>{{ scope.row.status == 1 ? "申请中" : scope.row.status == 2 ? "已通过" : "未通过" }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="resourceName" header-align="center" width="564px" align="center" label="申请数据类型">
|
</el-table-column>
|
</el-table>
|
</el-tab-pane>
|
<el-tab-pane label="我的审核" name="page3" v-if="this.$store.state.user.roles.indexOf('admin') > -1"
|
class="box-card">
|
<!--工具栏-->
|
<div style="float: left; width: 100%; ">
|
<el-form :inline="true">
|
<el-form-item>
|
|
</el-form-item>
|
</el-form>
|
</div>
|
<el-table border :data="tableTreeDdataApply" size="mini" style="width: 100%;background: transparent;"
|
@selection-change="handleSelectionChange" rowKey="id">
|
<el-table-column type="selection" width="55"> </el-table-column>
|
<el-table-column prop="userName" header-align="center" align="center" label="申请人名称">
|
</el-table-column>
|
<el-table-column prop="status" header-align="center" align="center" label="审核结果">
|
<template slot-scope="scope">
|
<div>{{ scope.row.status == 1 ? "申请中" : scope.row.status == 2 ? "已通过" : "未通过" }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="resourceName" header-align="center" align="center" label="申请数据类型">
|
</el-table-column>
|
<el-table-column header-align="center" align="center" label="操作">
|
<template slot-scope="scope">
|
<el-button type="text" size="small" @click="pass(scope.row)"
|
v-show="scope.row.status == '1'">通过</el-button>
|
<el-button type="text" size="small" @click="refuse(scope.row)"
|
v-show="scope.row.status == '1'">拒绝</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-tab-pane>
|
</el-tabs>
|
|
</div>
|
</template>
|
<script>
|
import { mapState } from "vuex";
|
import ResourceMenu from "./ResourceMenu/ResourceMenu.vue";
|
import AddResource from "./AddResource/AddResource.vue";
|
import ShareResource from "./ShareResource/ShareResource.vue";
|
import CardDataTable from "../../components/datasource/CardDataTable.vue";
|
import PreviewService from '../../components/dataservices/PreviewService.vue';
|
import { getResourceCatalogTree } from "@/api/api";
|
|
import {
|
getResourceData, addResourceData, deleteResourceData, myApprove, approveResource, RefuseResource, saveResource
|
} from "@/api/api";
|
|
export default {
|
components: {
|
ResourceMenu,
|
AddResource,
|
ShareResource,
|
CardDataTable,
|
PreviewService,
|
},
|
data() {
|
return {
|
activeName: "page1",
|
catalogId: "",
|
currentResourceCatalog: null,
|
dialogAddDataVisible: false,
|
dialogShareVisible: false,
|
applyServicesVisible: false,
|
servicesType: null,
|
//列表的数据分页
|
listData: {
|
pageNo: 1,
|
pageSize: 10,
|
},
|
filterString: "",
|
//矩阵卡片的数据分页
|
cardData: {
|
pageNo: 1,
|
pageSize: 8,
|
},
|
showStyle: 1,
|
defaultProps: {
|
children: "children",
|
label: "label",
|
},
|
tableTreeDdata: [],
|
tableTreeDdataApply: [],
|
selectedDataRows: [],
|
servicesTypeList: [],
|
tableTreeDdataTotal: 0,
|
tableTreeDdataTotalApply: 0,
|
cardRefresh: true, dialogPreviewVisible: false,
|
cimLevelDict: [
|
{
|
value: '1',
|
label: 'CIM1'
|
},
|
{
|
value: '2',
|
label: 'CIM2'
|
},
|
{
|
value: '3',
|
label: 'CIM3'
|
},
|
{
|
value: '4',
|
label: 'CIM4'
|
},
|
{
|
value: '5',
|
label: 'CIM5'
|
},
|
{
|
value: '6',
|
label: 'CIM6'
|
},
|
{
|
value: '7',
|
label: 'CIM7'
|
},
|
],
|
cimTypeDict: [
|
{
|
value: '1',
|
label: '时空基础'
|
},
|
{
|
value: '2',
|
label: '规划管控'
|
},
|
{
|
value: '3',
|
label: '工程管理'
|
},
|
{
|
value: '4',
|
label: '资源调查'
|
},
|
{
|
value: '5',
|
label: '公共专题'
|
},
|
{
|
value: '6',
|
label: '物联感知'
|
},
|
]
|
};
|
},
|
methods: {
|
handleShowAddResource() {
|
if (this.currentResourceCatalog === null) {
|
this.$message({
|
message: "请先选择类型增加数据。",
|
type: "warning",
|
duration: 4000,
|
}); return;
|
}
|
this.dialogAddDataVisible = true;
|
},
|
handleAddResource() {
|
let that = this;
|
let username = this.username;
|
let dataRow = this.$refs.addResourceRef.selectedDataRows;
|
if (dataRow === null || dataRow.length === 0) {
|
this.$message({
|
message: "请先选择要增加数据！",
|
type: "warning",
|
duration: 4000,
|
}); return; return;
|
}
|
//下拉必选验证
|
for (let i = 0; i < dataRow.length; i++) {
|
if (dataRow[i].cimLevel == undefined) {
|
this.$message({
|
message: "请先选择CIM等级！",
|
type: "warning",
|
duration: 4000,
|
});
|
return; return;
|
}
|
if (dataRow[i].dataType == undefined) {
|
this.$message({
|
message: "请先选择分类！",
|
type: "warning",
|
duration: 4000,
|
});
|
return; return;
|
}
|
}
|
|
|
let a = 0; let errorMsg = "";
|
for (let i = 0; i < dataRow.length; i++) {
|
let resourceId = this.currentResourceCatalog.id;
|
let name = dataRow[i].name;
|
let typename = dataRow[i].type;
|
let params = {
|
"gisserverId": dataRow[i].id,
|
"cimLevel": dataRow[i].cimLevel,
|
"dataType": dataRow[i].dataType,
|
"name": name,
|
"owner": username,
|
"createBy": username,
|
"resourceId": resourceId,
|
"type": typename,
|
"version": "v1.0"
|
};
|
|
debugger
|
|
addResourceData(params).then((res) => {
|
if (res.code === 200) {
|
a++;
|
} else {
|
errorMsg += "新增第" + i + "条失败：" + res.msg + ";"
|
}
|
if (i === dataRow.length - 1) {
|
that.$message("新增成功" + a + "条数据；" + errorMsg);
|
that.handlerQuery();
|
this.dialogAddDataVisible = false;
|
}
|
})
|
}
|
|
},
|
handleShowShareResource() {
|
this.$message("开发中..."); return;
|
if (this.currentResourceCatalog === null) {
|
this.$alert("请先选择共享数据目录！"); return;
|
}
|
this.dialogShareVisible = true
|
},
|
handleShareResource() {
|
///操作共享
|
let item = this.$refs.shareResourceRef.shareItem;
|
console.log(item); console.log(this.currentResourceCatalog);
|
this.dialogShareVisible = false;
|
},
|
showTableStyle() {
|
this.showStyle = 1;
|
},
|
showMatixStyle() {
|
this.showStyle = 2;
|
this.cardRefresh = true;
|
},
|
showMeteData(row) { alert(1); },
|
previewData(row) {
|
// this.dialogPreviewVisible = true;
|
// this.$nextTick(() => {
|
// this.$refs.perviewRef.showData(row);
|
// })
|
|
let stype = row.type;
|
let spath = "";
|
switch (stype) {
|
case "WFS":
|
spath = "wfsserver/" + row.name + "?VERSION=1.0.0&SERVICE=WFS&REQUEST=DescribeFeatureType";
|
break;
|
case "WMS":
|
spath = "service/wms1.3.jsp?name=" + row.name;
|
break;
|
case "TMS":
|
spath = "service/tms.jsp?name=" + row.name;
|
break;
|
case "WCS":
|
spath = "service/wcs.jsp?name=" + row.name;
|
break;
|
case "C3D":
|
spath = "service/c3d.jsp?name=" + row.name;
|
break;
|
case "CTS":
|
spath = "service/cts.jsp?name=" + row.name;
|
break;
|
default: break;
|
}
|
if (spath)
|
window.open(BASE_GISSERVER_URL + spath, '_blank', 'toolbar=0,location=0,menubar=0,height=380,width=540');
|
|
},
|
downloadData(row) { alert(1); },
|
deleteData(row) {
|
let that = this;
|
this.$confirm("此操作将删除该组中数据（服务不会删除），是否继续？", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
}).then(() => {
|
// [row.id]
|
let ids = []
|
ids.push(row.id)
|
deleteResourceData(ids.join()).then((res) => {
|
if (res.code === 200) {
|
if (res.code === 200) {
|
that.$message("删除成功");
|
that.handlerQuery();
|
}
|
}
|
});
|
}).catch(() => { });
|
},
|
resourceMenuClick(row) {
|
if (row) {
|
this.catalogId = row.id;
|
this.currentResourceCatalog = row;
|
} else {
|
this.catalogId = ""
|
}
|
this.handlerQuery();
|
},
|
handlerQuery() {
|
let that = this;
|
let _pagesize =
|
this.showStyle === 1 ? this.listData.pageSize : this.cardData.pageSize;
|
let _pageindex =
|
this.showStyle === 1 ? this.listData.pageNo : this.cardData.pageNo;
|
let params = {
|
catalogId: this.catalogId,
|
pageSize: _pagesize,
|
current: _pageindex,
|
key: this.filterString, //过滤条件
|
};
|
getResourceData(params).then((res) => {
|
if (res.code === 200) {
|
let data = res.data;
|
that.tableTreeDdata = data.records;
|
that.tableTreeDdataTotal = data.total;
|
}
|
else {
|
Message.error(res.msg);
|
}
|
});
|
},
|
getCimLevel(val) {
|
for (let i = 0; i < this.cimLevelDict.length; i++) {
|
if (val == this.cimLevelDict[i].value) {
|
return this.cimLevelDict[i].label
|
}
|
}
|
},
|
getDataType(val) {
|
for (let i = 0; i < this.cimTypeDict.length; i++) {
|
if (val == this.cimTypeDict[i].value) {
|
return this.cimTypeDict[i].label
|
}
|
}
|
},
|
handleSelectionChange(val) {
|
this.selectedDataRows = val;
|
},
|
//删除
|
deleteResource() {
|
if (this.selectedDataRows === null || this.selectedDataRows.length === 0) {
|
this.$message({
|
message: "请先选择要删除的数据！",
|
type: "warning",
|
duration: 4000,
|
}); return; return;
|
}
|
let ids = []
|
this.selectedDataRows.forEach((e) => {
|
ids.push(e.id)
|
})
|
deleteResourceData(ids.join()).then((res) => {
|
if (res.code === 200) {
|
this.$message("删除成功");
|
this.handlerQuery();
|
}
|
});
|
},
|
pass(row) {
|
let params = {
|
ids: [row.id]
|
}
|
approveResource([row.id]).then((res) => {
|
if (res.code == '200') {
|
this.$message("操作成功");
|
this.getApproveList()
|
}
|
})
|
},
|
refuse(row) {
|
let params = {
|
ids: [row.id]
|
}
|
RefuseResource([row.id]).then((res) => {
|
if (res.code == '200') {
|
this.$message("操作成功");
|
this.getApproveList()
|
}
|
})
|
},
|
getApproveList() {
|
myApprove().then((res) => {
|
if (res.code == 200) {
|
this.tableTreeDdataApply = res.data
|
}
|
})
|
},
|
//申请
|
applyServices() {
|
this.applyServicesVisible = true
|
},
|
//确认申请资源
|
handleApplyServices() {
|
saveResource([this.servicesType]).then((res) => {
|
if (res.code == '200') {
|
this.$message("操作成功");
|
this.getApproveList()
|
this.applyServicesVisible = false
|
}
|
})
|
}
|
},
|
computed: {
|
...mapState(["username"]),
|
},
|
mounted() {
|
this.getApproveList()
|
getResourceCatalogTree().then((res) => {
|
if (res.data) {
|
let data = res.data;
|
data.forEach((e, i) => { e.icon = "el-icon-share" })
|
this.servicesTypeList = res.data;
|
}
|
});
|
|
this.handlerQuery()
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.datasourcebox {
|
margin: 60px;
|
height: calc(100% - 120px) !important;
|
|
.el-container {
|
height: 100%;
|
padding: 5px;
|
}
|
|
.Apply {
|
|
/deep/ .el-table td.el-table__cell,
|
.el-table th.el-table__cell.is-leaf {
|
background: #2b5274 !important;
|
color: #fff !important;
|
}
|
|
.el-table /deep/ tr th {
|
border: 1px solid #ffffff;
|
background-color: #2b5274;
|
color: #fff;
|
}
|
}
|
|
.el-aside {
|
height: 100%;
|
padding: 0px;
|
}
|
|
.el-main {
|
margin: 0px;
|
padding: 0px
|
}
|
|
/deep/.el-dialog {
|
background: rgba(30, 44, 69, 1);
|
}
|
|
/deep/ .el-dialog__header {
|
padding: 10px;
|
background-color: rgba(8, 164, 221, 0.6) !important;
|
border-radius: 5px 5px 0px 0px;
|
}
|
|
/deep/ .el-dialog__headerbtn {
|
top: 10px;
|
color: #FFF;
|
}
|
|
/deep/ .el-dialog__close {
|
top: 10px;
|
color: #FFF;
|
}
|
|
|
/deep/ .el-dialog__title {
|
line-height: 20px;
|
font-size: 14px;
|
color: #FFF;
|
font-weight: bold;
|
}
|
|
/deep/ .el-dialog__body {
|
padding-top: 0px;
|
padding: 10px;
|
color: #FFF;
|
|
/deep/ .el-aside {
|
border: 1px solid #FFF !important;
|
background: #00212d !important;
|
}
|
}
|
|
|
/deep/ .el-tree {
|
color: #FFF !important;
|
background: #00212d !important;
|
}
|
|
/deep/ .el-tree-node__content:hover {
|
background: rgba(30, 44, 69, 1);
|
}
|
|
.box-card {
|
border: 0 !important;
|
overflow: auto;
|
height: 100%;
|
border-radius: 0 !important;
|
background: rgba(30, 44, 69, 1);
|
|
// /deep/.el-button {
|
// background: transparent;
|
// border: 1px solid #5c6d96;
|
// color: #ffffff;
|
// }
|
|
// /deep/.el-button:hover {
|
// background: #5c6d96;
|
// border: 1px solid #5c6d96;
|
// color: #ffffff;
|
// }
|
|
|
/deep/ .el-card__header {
|
background: rgba(0, 166, 226, 0.6) !important;
|
// box-shadow: 0px 0px 4px 0px rgba(14, 22, 32, 0.2);
|
// border-radius: 6px 6px 0px 0px;
|
height: 42px;
|
font-size: 16px;
|
font-weight: 400;
|
border-bottom: 0;
|
padding: 10px;
|
}
|
|
/deep/ .el-card__body {
|
padding: 15px
|
}
|
|
.el-table /deep/ tr {
|
background-color: transparent;
|
color: rgba(240, 250, 254, 0.65);
|
}
|
|
.el-table /deep/ tr th {
|
background-color: rgba(240, 250, 254, 0.1);
|
color: rgba(240, 250, 254, 0.85);
|
}
|
|
.el-table /deep/ tr:hover>td {
|
background-color: rgba(0, 166, 226, 0.4) !important;
|
}
|
|
.el-pagination /deep/ .btn-prev,
|
.el-pagination /deep/ .btn-next,
|
.el-pagination /deep/ .el-input__inner,
|
.el-pagination /deep/ .el-pager li {
|
background-color: rgba(0, 166, 226, 0.02);
|
border-radius: 2px 2px 2px 2px;
|
border: 1px solid rgba(240, 250, 254, 0.3);
|
color: rgba(240, 250, 254, 0.65) !important;
|
}
|
|
.el-pagination /deep/ .el-pagination__jump {
|
color: rgba(240, 250, 254, 0.65);
|
}
|
|
/deep/ .el-input__inner {
|
background-color: transparent;
|
background-image: none;
|
border-radius: 0px;
|
border: 1px solid #5c6d96;
|
color: #ffffff;
|
}
|
|
/deep/.el-input-group__append {
|
background: transparent;
|
border: 1px solid #5c6d96;
|
color: #ffffff;
|
}
|
|
}
|
|
}
|
|
// .box-dialog {
|
// /deep/ .el-dialog {
|
// border-radius: 5px;
|
// background: rgba(30, 44, 69, 1);
|
// }
|
|
// /deep/ .el-dialog__header {
|
// padding: 10px;
|
// background-color: rgba(8, 164, 221, 0.6) !important;
|
// border-radius: 5px 5px 0px 0px;
|
// }
|
|
// /deep/ .el-dialog__title {
|
// line-height: 20px;
|
// font-size: 14px;
|
// color: #FFF;
|
// font-weight: bold;
|
// }
|
|
// /deep/ .el-dialog__headerbtn {
|
// top: 10px;
|
// }
|
|
// /deep/ .el-dialog__body {
|
// padding-top: 0px;
|
// padding: 10px;
|
// color: #FFF;
|
|
// /deep/ .el-aside {
|
// border: 1px solid #FFF !important;
|
// background: #00212d !important;
|
// }
|
// }
|
// }
|
</style>
|
<style scoped>
|
.system-container {
|
margin: 60px;
|
height: calc(100% - 120px) !important;
|
overflow: hidden;
|
}
|
|
>>>.el-tabs__item {
|
color: #fff;
|
|
}
|
|
>>>.el-tabs--card>.el-tabs__header {
|
border-bottom: 1px solid #3170b6;
|
}
|
|
>>>.el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
|
border-bottom: 1px solid #3170b6;
|
background: #1b3457;
|
}
|
|
>>>.el-tabs--card>.el-tabs__header .el-tabs__nav {
|
border: 1px solid #3170b6;
|
}
|
|
>>>.el-tabs--card>.el-tabs__header .el-tabs__item {
|
border-left: 1px solid #3170b6;
|
}
|
</style>
|
