样式修改 #10

Merged
lukeyan merged 1 commits from lukeyan into master 2 years ago

Binary file not shown.

After

Width:  |  Height:  |  Size: 322 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

@ -348,12 +348,12 @@ export default {
overflow-y: scroll; overflow-y: scroll;
} }
.form_body::-webkit-scrollbar { .form_body::-webkit-scrollbar {
width: 10px; width: 6px;
background-color: #5e666a; background-color: #5e666a;
border-radius: 4px; border-radius: 4px;
} }
.form_body::-webkit-scrollbar-thumb { .form_body::-webkit-scrollbar-thumb {
width: 9px; width: 5px;
background-color: #3c4b4a; background-color: #3c4b4a;
border-radius: 4px; border-radius: 4px;
} }
@ -387,6 +387,10 @@ export default {
} }
} }
} }
.commerceMessage {
background: #6C8097;
border: 1px solid #495461;
}
/* 为适应上传图片表单布局把企业工商表单拆分 */ /* 为适应上传图片表单布局把企业工商表单拆分 */
.commerceMessage_one { .commerceMessage_one {
display: flex; display: flex;

@ -21,7 +21,7 @@
> >
</el-input> </el-input>
<div class="top_search_button"> <div class="top_search_button">
<i class="el-icon-search"></i> <i class="el-icon-search" @click="getData_icon()"></i>
</div> </div>
</div> </div>
<div class="top_add_btn"> <div class="top_add_btn">
@ -33,7 +33,7 @@
<ul> <ul>
<li v-for="item in company_data" :key="item.id"> <li v-for="item in company_data" :key="item.id">
<img :src="item.picUrl" alt="" /> <img :src="item.picUrl" alt="" />
<span class="company_name"> {{ item.companyName }} </span> <span class="company_name"> {{ item.name }} </span>
<div class="company_label"> <div class="company_label">
<div <div
class="company_label_data" class="company_label_data"
@ -43,7 +43,7 @@
{{ val }} {{ val }}
</div> </div>
</div> </div>
<span class="company_unit"> {{ item.companyAddress }}</span> <span class="company_unit"> {{ item.unit }}</span>
<!-- 遮罩层 --> <!-- 遮罩层 -->
<div class="image_mask"> <div class="image_mask">
<div class="btn"> <div class="btn">
@ -60,10 +60,11 @@
<!-- 分页区域 --> <!-- 分页区域 -->
<div class="footer"> <div class="footer">
<el-pagination <el-pagination
@size-change="handleSizeChange" :background="true"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
:page-sizes="[6]" :page-sizes="[6]"
:page-size="100" :page-size="pageSize"
:current-page="pageNum"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="total" :total="total"
> >
@ -80,6 +81,7 @@
import CompanyDataDialog from "./components/companyDataDialog"; import CompanyDataDialog from "./components/companyDataDialog";
import ClearDialog from "./components/clearDialog"; import ClearDialog from "./components/clearDialog";
import { getCompanyList } from "@/api/systemManagement"; import { getCompanyList } from "@/api/systemManagement";
import { debounce } from "@/utils/publicMethod_lxy/debounce.js";
export default { export default {
name: "companyList", name: "companyList",
components: { components: {
@ -89,18 +91,7 @@ export default {
data() { data() {
return { return {
searchCompany: "", searchCompany: "",
company_data: [ company_data: [],
{
value: "1",
name: "宁波镇海兴达化工有限公司",
unit: "宁波镇海兴达化工有限公司工业园",
},
{ value: "2" },
{ value: "3" },
{ value: "4" },
{ value: "5" },
{ value: "6" },
],
pageSize: 6, pageSize: 6,
pageNum: 1, pageNum: 1,
total: "", total: "",
@ -125,11 +116,40 @@ export default {
const params = { const params = {
pageSize: this.pageSize, pageSize: this.pageSize,
pageNum: this.pageNum, pageNum: this.pageNum,
companyName: this.searchCompany, //
};
getCompanyList(params).then((res) => {
if (res.code === 200) {
console.log("res.data", res);
this.company_data = res.data;
this.total = res.total;
} else {
this.$message.warnning(res.msg);
}
});
},
//
getData_icon: debounce(function () {
const params = {
pageSize: this.pageSize,
pageNum: this.pageNum,
companyName: this.searchCompany, //
}; };
console.log("params", params);
getCompanyList(params).then((res) => { getCompanyList(params).then((res) => {
console.log("res.data", res.data); if (res.code === 200) {
// this.company_data = res.data; console.log("res.data", res);
this.company_data = res.data;
this.total = res.total;
} else {
this.$message.warnning(res.msg);
}
}); });
}, 300),
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.pageNum = val;
this.getData();
}, },
}, },
}; };
@ -189,7 +209,7 @@ export default {
} }
} }
.top_search_button { .top_search_button {
width: 10%; width: 7%;
height: 100%; height: 100%;
border-radius: 0px 4px 4px 0px; border-radius: 0px 4px 4px 0px;
background: #0e3936; background: #0e3936;
@ -198,7 +218,7 @@ export default {
cursor: pointer; cursor: pointer;
.el-icon-search { .el-icon-search {
color: #fff; color: #fff;
padding: 12% 0; padding: 11% 0;
} }
} }
.top_search_button:focus, .top_search_button:focus,
@ -214,13 +234,13 @@ export default {
border: 1px solid #4a6072; border: 1px solid #4a6072;
color: #fff; color: #fff;
border-radius: 0px !important; border-radius: 0px !important;
background: #323f43; background: url("~@/assets/companyFile/btn05.png") no-repeat !important;
background-size: 100% 100% !important;
} }
.el-button:focus, .el-button:focus,
.el-button:hover { .el-button:hover {
color: #34e1b3; text-shadow: 0 0 9px #34e1b3;
background: url("~@/assets/companyFile/891771.png") no-repeat !important; filter: brightness(150%);
background-size: 100% 100% !important;
} }
} }
} }
@ -245,16 +265,18 @@ export default {
img { img {
margin-left: 1%; margin-left: 1%;
margin-top: 1.2%; margin-top: 1.2%;
width: 98%; width: 99%;
height: 97%; height: 98.4%;
} }
/* 公司图片相关信息区域 */ /* 公司图片相关信息区域 */
.company_name { .company_name {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
color: #fff; color: #fff;
text-shadow: 0 0 9px #ffe6d9;
left: 10px; left: 10px;
bottom: 70px; bottom: 70px;
font-size: 18px;
} }
.company_label { .company_label {
display: flex; display: flex;
@ -268,7 +290,7 @@ export default {
padding: 0px 5px 0px 5px; padding: 0px 5px 0px 5px;
height: 30px; height: 30px;
color: #34e1b3; color: #34e1b3;
background: url("~@/assets/companyFile/891771.png") no-repeat !important; background: url("~@/assets/companyFile/btn04.png") no-repeat !important;
background-size: 100% 100% !important; background-size: 100% 100% !important;
margin-right: 5px; margin-right: 5px;
} }
@ -287,7 +309,7 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
bottom: 0; bottom: 0;
background: rgba(101, 101, 101, 0.6); background: rgba(73, 72, 72, 0.6);
color: #ffffff; color: #ffffff;
opacity: 0; opacity: 0;
/* 图片鼠标经过按钮 */ /* 图片鼠标经过按钮 */
@ -297,32 +319,38 @@ export default {
button { button {
height: 40px; height: 40px;
margin-right: 25px; margin-right: 25px;
font-size: 24px; font-size: 18px;
color: #fff; color: #fff;
border: 1px; border: 1px;
border-radius: 0px; border-radius: 0px;
cursor: pointer; cursor: pointer;
} }
button.check { button.check {
background: #126a58; background: url("~@/assets/companyFile/btn05.png") no-repeat !important;
background-size: 100% 100% !important;
} }
/* 点击高亮 */ /* 点击高亮 */
button.check:hover,
button.check:focus { button.check:focus {
background: #29b397; filter: brightness(150%);
} }
button.change { button.change {
background: rgb(7, 72, 92); background: url("~@/assets/companyFile/btn06.png") no-repeat !important;
background-size: 100% 100% !important;
} }
/* 点击高亮 */ /* 点击高亮 */
button.change:hover,
button.change:focus { button.change:focus {
background: rgb(19, 125, 158); filter: brightness(150%);
} }
button.clear { button.clear {
background: rgb(107, 14, 14); background: url("~@/assets/companyFile/btn07.png") no-repeat !important;
background-size: 100% 100% !important;
} }
/* 点击高亮 */ /* 点击高亮 */
button.clear:hover,
button.clear:focus { button.clear:focus {
background: rgb(151, 28, 28); filter: brightness(150%);
} }
} }
} }
@ -331,12 +359,21 @@ export default {
opacity: 1; opacity: 1;
cursor: default; cursor: default;
} }
li:hover .company_label_data {
opacity: 0;
}
li:hover span {
opacity: 0;
}
} }
} }
/* 底部分页展示区域 */ /* 底部分页展示区域 */
.footer { .footer {
.el-pagination { .el-pagination {
margin-left: 82%; margin-left: 59%;
/deep/.el-pagination__total {
color: #fff;
}
/deep/.el-input__inner { /deep/.el-input__inner {
border-radius: 0px; border-radius: 0px;
background: #3c4b4a; background: #3c4b4a;

Loading…
Cancel
Save