Skip to content

G
GaoQuIncubator
Commit 3c5613b7 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

overview

parent fea26476
Show whitespace changes
Inline Side-by-side
Showing with 1033 additions and 140 deletions
src/router/routers.js
View file @ 3c5613b7
...@@ -58,7 +58,7 @@ export const constantRouterMap = [ ...@@ -58,7 +58,7 @@ export const constantRouterMap = [
//component: Layout, //component: Layout,
component: HomeLayout, component: HomeLayout,
redirect: "noredirect", redirect: "noredirect",
hidden:true, hidden:false,
children: [ children: [
{ {
path: "enterprise", path: "enterprise",
...@@ -71,6 +71,12 @@ export const constantRouterMap = [ ...@@ -71,6 +71,12 @@ export const constantRouterMap = [
component: resolve => require(["@/views/system/home/tech"], resolve), component: resolve => require(["@/views/system/home/tech"], resolve),
name: "首页-科技局", name: "首页-科技局",
meta: { title: "首页", affix:true , icon: "index"} meta: { title: "首页", affix:true , icon: "index"}
},
{
path: "数据概览",
component: resolve => require(["@/views/system/home/overview"], resolve),
name: "首页-概览",
meta: { title: "概览", affix:true , icon: "index"}
} }
] ]
}, },
......
src/views/Screen/index.vue
View file @ 3c5613b7
...@@ -149,148 +149,28 @@ export default { ...@@ -149,148 +149,28 @@ export default {
this.zfqyndsjsfbhqs(); this.zfqyndsjsfbhqs();
}, 900); }, 900);
// 登录权限获取 this.getRoleInfo()
(t.getInfo = function () {
var url = t.LOCAL_API + "/auth/info"; });
return reqApi.common.requst },
.call(that.$route, "get", url) methods: {
.then((res) => { getRoleInfo(){
// 数据总览
request({
url: "auth/info",
method: "get",
}).then((res) => {
if (!res.error && res.user) { if (!res.error && res.user) {
// 设置全局登录用户类别标记 // 设置全局登录用户类别标记
localStorage.setItem( localStorage.setItem(
"groupIdByloginType", "groupIdByloginType",
res.user.jobs.length && res.user.jobs[0]["id"] res.user.jobs.length && res.user.jobs[0]["id"]
); );
m.init(); }else{
} else { location = '/login'
m.loginView = qf.UI.popWindow({
cover: true,
coverFull: true,
className: "login-ctn",
//container:b0_e, // id || Element对象
//backgroundColor:'rgba(0,0,0,.4);backdrop-filter:blur(15px);',
closeEvent: true,
html: '<div class="liner"></div>',
onload: function (v) {
m.loginView = v;
var el = v.el;
v.setStyle(v.Wrap, {
height: "5.04rem",
width: "9.12rem",
zIndex: 10,
borderRadius: ".06rem",
overflow: "hidden",
});
el.innerHTML = `<div class="l-left"><h3>Welcome!</h3><h4>高区应急综合管理平台</h4></div><div class="pop-login" ><div class="inbox-range"><div class="ctn-fix"><form class="el-form login-form el-form--label-left"><h3 class="title">登录</h3><div class="el-form-item is-required el-form-item--small"><div class="el-form-item__content" style=""><div class="el-input el-input--small el-input--prefix"><input type="text" autocomplete="off" placeholder="账号" class="el-input__inner"><span class="el-input__prefix el-icon-s-custom"></span></div></div><div class="el-form-item__error">用户名不能为空</div></div>
<div class="el-form-item is-required el-form-item--small"><div class="el-form-item__content" style=""><div class="el-input el-input--small el-input--prefix"><input type="password" autocomplete="off" placeholder="密码" class="el-input__inner"><span class="el-input__prefix el-icon-key"></span></div></div><div class="el-form-item__error">密码不能为空</div></div>
<div class="el-form-item is-required el-form-item--small">
<div class="el-form-item__content" style="display:flex;justify-content:space-between;">
<div class="el-input el-input--small el-input--prefix" style="width:50%;">
<input type="text" autocomplete="off" placeholder="验证码" class="el-input__inner">
<span class="el-input__prefix el-icon-circle-check"></span></div>
<div class="login-code"><img src=""></div>
</div><div class="el-form-item__error">验证码不能为空</div></div>
<div class="el-form-item el-form-item--small" style="width: 100%;"><div class="el-form-item__content" style="margin-left: 0px;"><button type="button" class="el-button el-button--primary el-button--medium" style="width: 100%;">登 录</button></div></div></form></div></div></div>`;
// 校验
m.loginView.check = function (el) {
var itemContent = el.parentNode.parentNode;
if (qf.trim(el.value)) {
return (
itemContent.nextElementSibling.classList.remove("open"),
1
);
} else {
itemContent.nextElementSibling.classList.add("open");
el.focus();
}
};
m.loginView.inputs = el.querySelectorAll("input");
for (var input of m.loginView.inputs) {
input.onblur = function (e) {
var tag = e.target || e.srcElement;
m.loginView.check(tag);
};
} }
// 验证码
(m.loginView.refreshCodeImg = function () {
m.getCodeImg().then((res) => {
var img = el.querySelector(".login-code>img");
img.src = res.img;
m.loginView.uuid = res.uuid;
}); });
})();
m.loginView.loginCheck = function () {
var inputs = m.loginView.inputs;
var username = inputs[0],
password = inputs[1],
captcha = inputs[2];
if (
m.loginView.check(username) &&
m.loginView.check(password) &&
m.loginView.check(captcha)
) {
var param = {
username: username.value,
password: encrypt(password.value),
code: captcha.value,
uuid: m.loginView.uuid,
};
var l1 = qf.UI.loading({ zIndex: 2051, timer: 10000 });
m.login(param)
.then((res) => {
l1.close();
if (res.token && res.user) {
m.init();
m.setToken(res.token);
m.loginView.remove();
} else {
new qf.UI.Notify({
zIndex: 2050,
type: "warning",
duration: 3000,
autoOpen: true,
message: res.message || res.msg || "",
});
m.loginView.refreshCodeImg();
}
})
.catch(function (e) {
console.log("catch ________________ ", e);
});
}
};
// 回车事件
m.loginView.keyup = function (e) {
if (e.keyCode === 13) {
m.loginView.loginCheck();
}
};
window.addEventListener("keyup", m.loginView.keyup);
}, },
click: function (tag) {
if (tag.nodeName === "BUTTON") {
m.loginView.loginCheck();
} else if (tag.nodeName === "IMG") {
m.loginView.refreshCodeImg();
}
},
close: function (e) {
window.removeEventListener("keyup", m.loginView.keyup);
delete m.loginView;
},
});
}
});
})();
});
},
methods: {
goBackendHome() { goBackendHome() {
if (localStorage.getItem("groupIdByloginType") * 1 == 1) { if (localStorage.getItem("groupIdByloginType") * 1 == 1) {
// 孵化器用户 // 孵化器用户
......
src/views/system/home/overview.vue
View file @ 3c5613b7
<template>
<div class="app-container">
<div class="header">
<ul>
<li @click="changeNav(0)" :class="{ active: activeIndex === 0 }">
<div class="title">孵化器概况</div>
</li>
<li @click="changeNav(1)" :class="{ active: activeIndex === 1 }">
<div class="title">在孵企业</div>
</li>
<li @click="changeNav(2)" :class="{ active: activeIndex === 2 }">
<div class="title">毕业企业</div>
</li>
<li @click="changeNav(3)" :class="{ active: activeIndex === 3 }">
<div class="title">中介机构</div>
</li>
<li @click="changeNav(4)" :class="{ active: activeIndex === 4 }">
<div class="title">创业导师</div>
</li>
</ul>
</div>
<div class="body">
<ul class="list">
<li class="overview tab_panel_0" v-if="activeIndex === 1">
<h2>威海高新区创业中心</h2>
<div class="contentWrapper">
<div class="left">
<div class="item">
<div class="title">
<span class="_left">总收入</span>
<span class="_right">查看更多>></span>
</div>
<div class="body">
<div class="_left">
<ul>
<li>孵化器总收入：12342万元</li>
<li>综合服务收入：12342万元</li>
<li>物业费收入：12342万元</li>
<li>房租费收入：12342万元</li>
<li>投资收入：12342万元</li>
<li>政策性收入：12342万元</li>
<li>其他：12342万元</li>
</ul>
</div>
<div class="_right">
<div class="charts pie"></div>
</div>
</div>
</div>
<div class="item">
<div class="title">
<span class="_left">总收入</span>
<span class="_right">查看更多>></span>
</div>
<div class="body">
<div class="_left">
<ul>
<li>运营机构:威海高新创业园运营管理有限公司</li>
<li>联 系人:联系人姓名</li>
<li>联系电话:0631-1234567</li>
<li>中心位于高新区内，交通便利</li>
</ul>
</div>
<div class="_right">
<div class="charts pie"></div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="item">
<div class="title">
<span class="_left">简介</span>
<span class="_right">查看更多>></span>
</div>
<div class="body">
<div class="_top">
<ul>
<li>运营机构:威海高新创业园运营管理有限公司</li>
<li>联 系人:联系人姓名</li>
<li>联系电话:0631-1234567</li>
<li>中心位于高新区内，交通便利</li>
</ul>
</div>
<div class="_bottom">
<img src="" alt="" />
</div>
</div>
</div>
</div>
</div>
</li>
<li class="tab_panel_1" v-if="activeIndex === 0">
<div class="_left">
<div class="_title">
<span>在孵企业</span>
<span>280家</span>
</div>
<div class="_list">
<el-input
placeholder="请输入内容"
prefix-icon="el-icon-search"
v-model="searchText"
style="100%"
></el-input>
<ul>
<li v-for="item1 in 10" :key="item1">
威海众智惠新信息科技有限公司
</li>
</ul>
<el-pagination
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-size="pageSize"
:total="totalItems"
layout="prev, pager, next"
/>
</div>
</div>
<div class="_right">
<h2>威海众智惠新信息科技有限公司</h2>
<div class="divider"></div>
<div class="_title prefixDiv">
<div class="_left">企业基础信息</div>
<div class="_right">查看企业简介>></div>
</div>
<div class="_body">
<ul>
<li v-for="item in 10" class="prefixPoint">
入驻时间: 2021-10-10
</li>
</ul>
</div>
<div class="_title prefixDiv">
<div class="_left">知识产权</div>
</div>
<div class="_body">
<ul>
<li v-for="item in 10" class="prefixPoint">
入驻时间: 2021-10-10
</li>
</ul>
</div>
<div class="_title prefixDiv">
<div class="_left">创业创新企业情况</div>
</div>
<div class="_body">
<ul>
<li v-for="item in 10" class="prefixPoint">
入驻时间: 2021-10-10
</li>
</ul>
</div>
<div class="_title prefixDiv">
<div class="_left">今年企业经营信息</div>
<div class="_right">查看更多>></div>
</div>
<div class="_body">
<ul>
<li v-for="item in 10" class="prefixPoint">
入驻时间: 2021-10-10
</li>
</ul>
</div>
<!-- -->
<div class="_title prefixDiv">
<div class="_left">企业产品</div>
<div class="_right">查看更多>></div>
</div>
<div class="_body">
<dl>
<dd v-for="item in 10">
<img src="" alt="">
<h3>环境监测设备</h3>
<p>内置NB-IoT物联网SIM卡，把数据传 输到晶合云平台或客户私有云平台， 实现数据</p>
</dd>
</dl>
</div>
</div>
</li>
<li class="tab_panel_4" v-if="activeIndex === 4">
<div class="_title">
<span>创业导师</span>
<el-input
placeholder="请输入姓名搜索"
prefix-icon="el-icon-search"
v-model="searchText4teacher"
></el-input>
</div>
<ul>
<li v-for="item in 10" :key="item">
<img src="" alt="" />
<p>姓名：张丽力</p>
<p>学历：博士</p>
<p>毕业学校：山东大学</p>
<p>联系电话：13521457845</p>
<a>查看简介&gt;</a>
</li>
</ul>
</li>
</ul>
</div>
<el-dialog
title="新增孵化器信息"
:visible.sync="dialogVisible"
@close="resetForm"
>
<el-form
label-width="170px"
:inline="true"
:model="formInline"
class="demo-form-inline"
:label-position="labelPosition"
>
<el-row>
<el-form-item label="孵化器名称">
<el-input
v-model="formInline.incubatorName"
placeholder=""
size="middle"
></el-input>
</el-form-item>
<el-form-item label="运行机构">
<el-input
v-model="formInline.operatingAgency"
placeholder=""
size="middle"
></el-input>
</el-form-item>
<el-form-item label="孵化器等级">
<el-select
v-model="formInline.incubatorLevel"
style="width: 200px"
size="middle"
>
<el-option
:label="item.name"
:value="item.value"
v-for="item in companyLevelList"
:key="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="联系人">
<el-input
v-model="formInline.contactPerson"
placeholder=""
size="middle"
></el-input>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="联系电话">
<el-input
v-model="formInline.contactPhone"
placeholder=""
size="middle"
></el-input>
</el-form-item>
<el-form-item label="孵化器使用总面积(m²)">
<el-input
v-model="formInline.totalArea"
placeholder=""
size="middle"
></el-input>
</el-form-item>
<el-form-item label="用于企业孵化的面积(m²)">
<el-input
v-model="formInline.incubationArea"
placeholder=""
size="middle"
></el-input>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="孵化器地理位置">
<el-input
v-model="formInline.address"
placeholder=""
size="small"
style="width: 360px"
disabled
></el-input>
<div class="map-ctn" :style="'width:500px;' + 'height:300px' + ';'">
<cu-amap ref="amap" :options="amapOptions()" />
</div>
</el-form-item>
<el-form-item style="margin-left: 80px">
<el-upload
class="upload-demo"
:action="`${baseAPI}api/file/upload?modelName=incubator`"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:on-success="handleSuccess"
:on-error="handleError"
:limit="1"
:on-exceed="handleExceed"
:file-list="fileList"
:show-file-list="false"
style="margin-bottom: 6px"
>
<span
style="margin-right: 5px; margin-left: -17px; font-weight: bold"
>孵化器图片</span
>
<el-button size="mini" type="default">上传图片</el-button>
</el-upload>
<div :style="'width:500px;' + 'height:300px' + ';'">
<div class="imgShowraper">
<img
:src="`${baseAPI}file/${formInline.incubatorImage}`"
alt=""
width="500"
height="300px"
/>
</div>
</div>
</el-form-item>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="edit">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
var baseAPI =
process.env.NODE_ENV === "development"
? process.env.VUE_APP_LOCAL_API + "/"
: (VUE_APP_API.ServiceURL || process.env.VUE_APP_LOCAL_API) + "/";
import crudHome from "@/api/system/home";
console.log(crudHome);
import IconSelect from "@/components/IconSelect";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { LOAD_CHILDREN_OPTIONS } from "@riophae/vue-treeselect";
import CRUD, { presenter, header, form, crud } from "@crud/crud";
import rrOperation from "@crud/RR.operation";
import crudOperation from "@crud/CRUD.operation";
import udOperation from "@crud/UD.operation";
import DateRangePicker from "@/components/DateRangePicker";
import dic from "@/api/system/dict";
import cuAmap from "@/components/AMap";
// crud交由presenter持有
const defaultForm = {
id: null,
title: null,
menuSort: 999,
path: null,
component: null,
componentName: null,
iframe: false,
roles: [],
pid: 0,
icon: null,
cache: false,
hidden: false,
type: 0,
permission: null,
};
export default {
name: "Menu",
components: {
cuAmap,
Treeselect,
IconSelect,
crudOperation,
rrOperation,
udOperation,
DateRangePicker,
},
cruds() {
return CRUD({
title: "菜单",
url: "api/menus",
crudMethod: { ...crudHome },
});
},
mixins: [presenter(), header(), form(defaultForm), crud()],
data() {
return {
// panel1,2,3
currentPage: 1, // 当前页码
pageSize: 10, // 每页显示的条目数量
totalItems: 100, // 总条目数
// 顶部切换菜单
activeIndex: 0,
searchText4teacher: "",
teacherList: [],
data: {
incubatorAllCount: 6,
incubatorCompanyCount: 10,
intermediaryAgencyCount: 10,
mentorAllCount: 7,
remainingArea: -99750,
total: 6,
totalArea: 382,
unIncubatorCompanyCount: 14,
list: [],
},
dialogVisible: false,
baseAPI: baseAPI,
labelPosition: "right",
fileList: [],
cmap: null,
Dict: { selectList: [] },
formInline: {
address: "",
contactPerson: "",
contactPhone: "",
id: "",
incubationArea: "",
incubatorImage: "",
incubatorLevel: 2,
incubatorName: "",
latitude: "",
longitude: "",
operatingAgency: "",
totalArea: "",
},
menus: [],
permission: {
add: ["admin", "menu:add"],
edit: ["admin", "menu:edit"],
del: ["admin", "menu:del"],
},
rules: {
title: [{ required: true, message: "请输入标题", trigger: "blur" }],
path: [{ required: true, message: "请输入地址", trigger: "blur" }],
},
};
},
computed: {
// remainingArea() {
// return this.formInline.totalArea - this.formInline.incubationArea;
// },
},
mounted() {
// this.getData();
dic.getCompanyDicts().then((res) => {
console.log(res);
this.companyLevelList = res.body.incubatorLevel || [];
});
this.getData();
},
methods: {
handleCurrentChange(newPage) {
// 切换分页
this.currentPage = newPage;
// 这里可以添加代码来加载新页的数据
console.log(`当前页: ${newPage}`);
},
changeNav(index) {
this.activeIndex = ~~index;
},
go2overview() {
alert("数据概览页开发ing~");
},
handleSuccess(response, file) {
// 处理上传成功
console.log("Upload success:", response, file);
this.formInline.incubatorImage = response.body;
// this.fileList.push(file); // 存储已上传文件
// this.tableData.push({
// name: file.name,
// status: '上传成功',
// });
},
handleError(err, file) {
// 处理上传错误
console.error("Upload failed:", err, file);
this.tableData.push({
name: file.name,
status: "上传失败",
});
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
files.length + fileList.length
} 个文件`
);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`);
},
amapOptions(cmap) {
var VUE = this;
var self = this,
form = this.formInline;
return {
zoom: 12,
center: [122.050189, 37.515189],
//showLabel: true,
//pitch: 40,
onload: function (cmap) {
// debugger
VUE.cmap = cmap;
var center = cmap.options.center;
var lng = form.longitude || center[0],
lat = form.latitude || center[1];
if (lng && lat) {
cmap.setCenter([lng, lat]);
// 添加标记
cmap.addMarker({
lnglat: [lng, lat],
title: "",
draggable: true,
dragend: function (e) {
// var lnglat = e.lnglat;
// cmap.deGeocode([lnglat.lng, lnglat.lat], function (addr) {
// form.address = addr;
// form.longitude = lnglat.lng;
// form.latitude = lnglat.lat;
// self.$forceUpdate();
// });
VUE.getAddrPlus(e, cmap);
},
});
}
},
click: function (e, cmap) {
// 经纬度坐标
VUE.getAddrPlus(e, cmap);
// var lnglat = e.lnglat;
// cmap.deGeocode([lnglat.lng, lnglat.lat], function (addr) {
// form.address = addr;
// form.longitude = lnglat.lng;
// form.latitude = lnglat.lat;
// });
cmap.marker && cmap.removeMarker();
// 添加标记
cmap.addMarker({
lnglat: [e.lnglat.lng, e.lnglat.lat],
title: "",
draggable: true,
dragend: function (e) {
// var lnglat = e.lnglat;
// cmap.deGeocode([lnglat.lng, lnglat.lat], function (addr) {
// form.address = addr;
// form.longitude = lnglat.lng;
// form.latitude = lnglat.lat;
// });
VUE.getAddrPlus(e, cmap, form);
},
});
},
};
},
getAddrPlus(e, cmap, form) {
var lnglat = e.lnglat;
let longitude = lnglat.lng;
let latitude = lnglat.lat;
// 创建逆地理编码对象
let geocoder;
AMap.plugin("AMap.Geocoder", () => {
geocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all",
});
console.log();
// 根据经纬度进行逆地理编码查询
geocoder.getAddress([longitude, latitude], (status, result) => {
if (status === "complete" && result.info === "OK") {
if (result.regeocode && result.regeocode.formattedAddress) {
let address = result.regeocode.formattedAddress;
this.formInline.address = address;
this.formInline.longitude = longitude;
this.formInline.latitude = latitude;
this.$forceUpdate();
console.log("精确地址获取", address);
}
} else {
console.error("获取地址失败");
}
});
});
},
onSubmit() {
console.log("submit!");
},
edit() {
if (this.formInline.incubatorName) {
}
crudHome.add(this.formInline).then((res) => {
if (res && res.code === 200) {
this.$message.success("保存成功"); // res.msg
this.getData();
this.dialogVisible = false;
}
});
},
getData(fn) {
crudHome
.getData4tech({
page: 0,
size: 999,
})
.then((res) => {
console.log(res, "getData4tech");
this.data = res.body;
});
},
// 选中图标
selected(name) {
this.form.icon = name;
},
},
};
</script>
<style>
/* .app-main {
background-color: #fff !important;
} */
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
.app-container {
padding: 20px;
background-color: #fff;
font-family: Microsoft YaHei;
}
.page-footer{
display:none !important;
}
.header {
background: #f5f7fa;
ul {
display: flex;
justify-content: start;
border: 1px solid #d8dce5;
background-color: #fff;
li {
width: 238px;
height: 48px;
display: flex;
align-items: center;
list-style: none;
justify-content: center;
cursor: pointer;
&:active,
&.active {
background: #1890ff;
.title {
color: #ffffff;
}
}
.title {
font-size: 16px;
color: #303133;
font-weight: bold;
}
}
}
}
.imgShowraper {
margin-left: 90px;
}
/**公共类 */
.divider {
width: 100%;
height: 1px;
border: 1px dashed #dddee1;
}
.prefixDiv {
position: relative;
&:before {
width: 4px;
height: 16px;
background: #1890ff;
position: absolute;
top: 50%; /* 垂直居中 */
transform: translateY(-50%); /* 精确居中 */
left: 16px;
content: "";
}
}
.prefixPoint {
position: relative;
&:before {
content: "";
width: 6px;
height: 6px;
background: #1890ff;
border-radius: 50%;
position: absolute;
left: 5px;
top: 50%; /* 垂直居中 */
transform: translateY(-50%); /* 精确居中 */
}
}
/** 第五个面板 */
.tab_panel_4 {
._title {
font-size: 16px;
color: #1890ff;
width: 100%;
height: 50px;
background: #e4f2ff;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
padding-left: 26px;
&:before {
width: 4px;
height: 16px;
background: #1890ff;
position: absolute;
// top: 19px;
top: 50%; /* 垂直居中 */
transform: translateY(-50%); /* 精确居中 */
left: 16px;
content: "";
}
}
ul {
display: flex;
flex-wrap: wrap;
margin-left: 60px;
// margin-top: 20px;
& > li {
position: relative;
width: 260px;
height: 334px;
background: #fff;
border: 1px solid #dddee1;
text-align: center;
padding: 10px;
margin-left: 10px;
margin-right: 40px;
margin-top: 20px;
img {
width: 200px;
height: 200px;
margin: 0 auto;
}
a {
position: absolute;
right: 6px;
bottom: 60px;
font-size: 15px;
color: #1890ff;
}
p {
font-size: 15px;
color: #606266;
padding-left: 18px;
text-align: left;
position: relative;
padding-top: 3px;
padding-bottom: 3px;
&:before {
content: "";
width: 6px;
height: 6px;
background: #1890ff;
border-radius: 50%;
position: absolute;
left: 5px;
top: 50%; /* 垂直居中 */
transform: translateY(-50%); /* 精确居中 */
}
}
}
}
}
.tab_panel_1 {
display: flex;
padding: 10px;
& > ._left {
flex: 1;
margin-right: 20px;
height: 798px !important;
border: 1px solid #DDDEE1;
padding: 20px;
._title {
display: flex;
width: 100%;
justify-content: space-between;
margin-top: 10px;
margin-bottom: 20px;
span {
&:first-child {
font-size: 19px;
color: #303133;
}
&:last-child {
font-size: 19px;
color: #42b983;
}
}
}
li {
font-size: 15px;
color: #666666;
width: 100%;
height: 38px;
line-height: 38px;
text-align: left;
padding-left: 10px;
cursor: pointer;
&.active,
&:hover {
background: #1890ff;
color: #fff;
}
}
}
& > ._right {
flex: 4;
h2 {
font-weight: 400;
font-size: 27px;
color: #42b983;
text-align: center;
margin-top: 20px;
margin-block: 20px;
}
._title {
width: 100%;
height: 36px;
background: #e4f2ff;
font-size: 16px;
color: #1890ff;
margin-top: 10px;
margin-bottom: 6px;
._left {
float: left;
margin-left: 30px;
margin-top: 6px;
}
._right {
float: right;
margin-right: 30px;
margin-top: 6px;
}
}
ul {
display: flex;
flex-wrap: wrap;
padding-left: 20px;
li {
width: 290px;
font-size: 15px;
color: #606266;
padding: 10px;
padding-left: 20px;
}
}
dl{
display: flex;
flex-wrap: wrap;
padding-left: 20px;
dd {
width: 250px;
height: 274px;
font-size: 15px;
color: #606266;
/* padding: 10px; */
margin-left: 20px;
margin-right: 20px;
border: 1px solid #DDDEE1;
margin-top: 10px;
img{
width: 250px;
height: 150px;
}
h3{
font-size: 15px;
color: #606266;
padding-left: 15px;
}
p{
font-size: 13px;
color: #969AA3;
padding-left: 15px;
line-height: 20px;
}
}
}
}
}
.list {
// ul元素
background: #f5f6fb;
display: flex;
flex-wrap: wrap;
& > li {
width: 100%;
height: 442px;
background: #ffffff;
position: relative;
}
.overview {
h2 {
font-weight: 400;
font-size: 27px;
color: #42b983;
text-align: center;
padding-top: 16px;
padding-bottom: 16px;
}
.contentWrapper {
border-top: 1px dashed #dddee1;
display: flex;
padding: 16px;
& > div {
flex: 1;
}
.left {
border-right: 1px dashed #dddee1;
.body {
display: flex;
._left,
._right {
flex: 1;
}
}
li {
font-size: 15px;
color: #606266;
line-height: 16px;
padding: 4px 42px;
}
}
.right {
.body {
display: flex;
}
li {
font-size: 15px;
color: #606266;
line-height: 16px;
padding: 4px 42px;
}
}
}
}
}
.body {
background-color: #fff;
.title {
color: #1890ff;
height: 48px;
background: #e4f2ff;
font-weight: 400;
font-size: 16px;
line-height: 48px;
margin-bottom: 20px;
display: flex;
justify-content: space-between;
padding-left: 20px;
padding-right: 20px;
}
}
// ::v-deep .el-input {
// width: 200px;
// }
// ::v-deep .el-input__inner {
// height: 38px;
// }
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment