lukeyan
11 months ago
parent
863a692c58
commit
37a095d516
@ -0,0 +1,84 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
class="dialog"
|
||||||
|
title="纠纷详情"
|
||||||
|
:visible.sync="visible"
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
width="1100px"
|
||||||
|
@close="close"
|
||||||
|
>
|
||||||
|
<div class="text">
|
||||||
|
<div v-html="this.text"></div>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
// import { get_counter_item } from "@/api/applySupermarket/counterfraud";
|
||||||
|
export default {
|
||||||
|
name: "CompanyDialog",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
visible: false,
|
||||||
|
text: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
open(item) {
|
||||||
|
this.visible = true;
|
||||||
|
console.log('item',item);
|
||||||
|
// 请求返回文本
|
||||||
|
// get_counter_item(item.id).then((res) => {
|
||||||
|
// console.log("id", res.data.content);
|
||||||
|
// this.text = res.data.content;
|
||||||
|
// });
|
||||||
|
},
|
||||||
|
close() {
|
||||||
|
this.visible = false;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
/deep/.el-dialog {
|
||||||
|
.el-dialog__title {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 19px;
|
||||||
|
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||||
|
}
|
||||||
|
background-image: url("~@/assets/companyFile/dialogBack.png");
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
height: 680px;
|
||||||
|
/* 关闭弹窗叉号 */
|
||||||
|
.el-dialog__headerbtn {
|
||||||
|
.el-dialog__close {
|
||||||
|
color: #e55b5b;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-dialog__body {
|
||||||
|
padding: 0px;
|
||||||
|
padding-left: 15px;
|
||||||
|
padding-right: 15px;
|
||||||
|
.text {
|
||||||
|
margin-top: 20px;
|
||||||
|
overflow-y: scroll;
|
||||||
|
// border: 0.1px solid #28847e;
|
||||||
|
height: 600px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.text::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
background-color: rbga(0,0,0,0);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text::-webkit-scrollbar-thumb {
|
||||||
|
width: 5px;
|
||||||
|
background-color: #28847e;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,629 @@
|
|||||||
|
<!-- 企业纠纷提醒 -->
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- 查询 -->
|
||||||
|
<div class="item_search">
|
||||||
|
<el-form :model="search" class="search_form">
|
||||||
|
<el-form-item label="纠纷时间">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="search.search_time"
|
||||||
|
type="datetimerange"
|
||||||
|
range-separator="至"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="企业名称">
|
||||||
|
<el-input v-model="search.word" placeholder="请选择关键词"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="处理状态">
|
||||||
|
<el-select v-model="search.status" placeholder="请选择处理状态">
|
||||||
|
<el-option
|
||||||
|
v-for="item in status_list"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button icon="el-icon-search" @click="search_data">搜索</el-button>
|
||||||
|
<el-button icon="el-icon-refresh-right" @click="reset"
|
||||||
|
>重置</el-button
|
||||||
|
>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<!-- 通报展示 -->
|
||||||
|
<div class="item_list">
|
||||||
|
<div v-for="item in dispute_list" :key="item.id" class="dispute_item">
|
||||||
|
<div class="dispute_title">
|
||||||
|
<div class="text">纠纷概述</div>
|
||||||
|
</div>
|
||||||
|
<div class="dispute_content">
|
||||||
|
<!-- 纠纷简要 -->
|
||||||
|
<div class="dispute_glossary">
|
||||||
|
<div class="dispute_glossary_icon">
|
||||||
|
<div class="icon_green"></div>
|
||||||
|
</div>
|
||||||
|
<div class="dispute_glossary_text">纠纷简要:</div>
|
||||||
|
<div :title="item.title" class="dispute_glossary_value">
|
||||||
|
{{ item.title }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 企业名称 -->
|
||||||
|
<div class="dispute_company">
|
||||||
|
<div class="dispute_company_icon">
|
||||||
|
<i class="el-icon-office-building"></i>
|
||||||
|
</div>
|
||||||
|
<div class="dispute_company_name">纠纷企业:</div>
|
||||||
|
<div class="dispute_company_name_value">
|
||||||
|
{{ item.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 处理状态 -->
|
||||||
|
<div class="dispute_status">
|
||||||
|
<div class="dispute_status_icon">
|
||||||
|
<i class="el-icon-document"></i>
|
||||||
|
</div>
|
||||||
|
<div class="dispute_status_text">处理状态:</div>
|
||||||
|
<div class="dispute_status_value">{{ item.status }}</div>
|
||||||
|
</div>
|
||||||
|
<!-- 纠纷时间 -->
|
||||||
|
<div class="dispute_time">
|
||||||
|
<div class="dispute_time_icon">
|
||||||
|
<i class="el-icon-alarm-clock"></i>
|
||||||
|
</div>
|
||||||
|
<div class="dispute_time_text">纠纷时间:</div>
|
||||||
|
<div class="dispute_time_value">{{ item.modifyTime }}</div>
|
||||||
|
<!-- 查看详情按钮 -->
|
||||||
|
<div class="dispute_btn">
|
||||||
|
<el-button
|
||||||
|
size="small"
|
||||||
|
icon="el-icon-s-promotion"
|
||||||
|
@click="check_item(item)"
|
||||||
|
>查看详情</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 分页 -->
|
||||||
|
<lkyPagination
|
||||||
|
:page_sizes="page_sizes"
|
||||||
|
:pageSize="pageSize"
|
||||||
|
:pageNum="pageNum"
|
||||||
|
:total="total"
|
||||||
|
:pagination_width="pagination_width"
|
||||||
|
@size_change="size_change"
|
||||||
|
@num_change="num_change"
|
||||||
|
></lkyPagination>
|
||||||
|
<CompanyDialog ref="companyDialog"></CompanyDialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
// import { get_dispute_data } from "@/api/applySupermarket/dispute";
|
||||||
|
import CompanyDialog from "./components/companyDialog";
|
||||||
|
export default {
|
||||||
|
name: "dispute",
|
||||||
|
components: {
|
||||||
|
CompanyDialog,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
search: {
|
||||||
|
search_time: [this.get_today(), this.get_tomorrow()],
|
||||||
|
word: "",
|
||||||
|
},
|
||||||
|
status_list: [
|
||||||
|
{
|
||||||
|
label: "全部",
|
||||||
|
value: "0",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "已处理",
|
||||||
|
value: "1",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "未处理",
|
||||||
|
value: "2",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
dispute_list: [
|
||||||
|
{
|
||||||
|
id: "1",
|
||||||
|
title: "宁波镇海兴达化工有限公司内部发生资产纠纷矛盾",
|
||||||
|
modifyTime: "2023-10-21 09:21:11",
|
||||||
|
name: "宁波镇海兴达化工有限公司",
|
||||||
|
status: "已处理",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "2",
|
||||||
|
title: "宁波镇海兴达化工有限公司内部发生资产纠纷矛盾",
|
||||||
|
modifyTime: "2023-10-21 09:21:11",
|
||||||
|
name: "宁波镇海兴达化工有限公司",
|
||||||
|
status: "已处理",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3",
|
||||||
|
title: "宁波镇海兴达化工有限公司内部发生资产纠纷矛盾",
|
||||||
|
modifyTime: "2023-10-21 09:21:11",
|
||||||
|
name: "宁波镇海兴达化工有限公司",
|
||||||
|
status: "已处理",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "4",
|
||||||
|
title: "宁波镇海兴达化工有限公司内部发生资产纠纷矛盾",
|
||||||
|
modifyTime: "2023-10-21 09:21:11",
|
||||||
|
name: "宁波镇海兴达化工有限公司",
|
||||||
|
status: "已处理",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "5",
|
||||||
|
title: "宁波镇海兴达化工有限公司内部发生资产纠纷矛盾",
|
||||||
|
modifyTime: "2023-10-21 09:21:11",
|
||||||
|
name: "宁波镇海兴达化工有限公司",
|
||||||
|
status: "已处理",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "6",
|
||||||
|
title: "宁波镇海兴达化工有限公司内部发生资产纠纷矛盾",
|
||||||
|
modifyTime: "2023-10-21 09:21:11",
|
||||||
|
name: "宁波镇海兴达化工有限公司",
|
||||||
|
status: "已处理",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "7",
|
||||||
|
title: "宁波镇海兴达化工有限公司内部发生资产纠纷矛盾",
|
||||||
|
modifyTime: "2023-10-21 09:21:11",
|
||||||
|
name: "宁波镇海兴达化工有限公司",
|
||||||
|
status: "已处理",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "8",
|
||||||
|
title: "宁波镇海兴达化工有限公司内部发生资产纠纷矛盾",
|
||||||
|
modifyTime: "2023-10-21 09:21:11",
|
||||||
|
name: "宁波镇海兴达化工有限公司",
|
||||||
|
status: "已处理",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "9",
|
||||||
|
title: "宁波镇海兴达化工有限公司内部发生资产纠纷矛盾",
|
||||||
|
modifyTime: "2023-10-21 09:21:11",
|
||||||
|
name: "宁波镇海兴达化工有限公司",
|
||||||
|
status: "已处理",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "10",
|
||||||
|
title: "宁波镇海兴达化工有限公司内部发生资产纠纷矛盾",
|
||||||
|
modifyTime: "2023-10-21 09:21:11",
|
||||||
|
name: "宁波镇海兴达化工有限公司",
|
||||||
|
status: "已处理",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "11",
|
||||||
|
title: "宁波镇海兴达化工有限公司内部发生资产纠纷矛盾",
|
||||||
|
modifyTime: "2023-10-21 09:21:11",
|
||||||
|
name: "宁波镇海兴达化工有限公司",
|
||||||
|
status: "已处理",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "12",
|
||||||
|
title: "宁波镇海兴达化工有限公司内部发生资产纠纷矛盾",
|
||||||
|
modifyTime: "2023-10-21 09:21:11",
|
||||||
|
name: "宁波镇海兴达化工有限公司",
|
||||||
|
status: "已处理",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
pageSize: 16,
|
||||||
|
pageNum: 1,
|
||||||
|
total: 0,
|
||||||
|
page_sizes: [16],
|
||||||
|
pagination_width: "94",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.search_data();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 转换时间格式
|
||||||
|
dateConversion(value) {
|
||||||
|
let date = new Date(value);
|
||||||
|
let y = date.getFullYear();
|
||||||
|
let m = date.getMonth() + 1;
|
||||||
|
m = m < 10 ? "0" + m : m;
|
||||||
|
let d = date.getDate();
|
||||||
|
d = d < 10 ? "0" + d : d;
|
||||||
|
let h = date.getHours();
|
||||||
|
h = h < 10 ? "0" + h : h;
|
||||||
|
let M = date.getMinutes();
|
||||||
|
M = M < 10 ? "0" + M : M;
|
||||||
|
let s = date.getSeconds();
|
||||||
|
s = s < 10 ? "0" + s : s;
|
||||||
|
let dateTime = y + "-" + m + "-" + d + " " + h + ":" + M + ":" + s;
|
||||||
|
return dateTime;
|
||||||
|
},
|
||||||
|
// 获取当前时间
|
||||||
|
get_today() {
|
||||||
|
let date = new Date();
|
||||||
|
let y = date.getFullYear();
|
||||||
|
let m = date.getMonth() + 1;
|
||||||
|
m = m < 10 ? "0" + m : m;
|
||||||
|
let d = date.getDate();
|
||||||
|
d = d < 10 ? "0" + d : d;
|
||||||
|
let dateTime =
|
||||||
|
y + "-" + m + "-" + d + " " + "00" + ":" + "00" + ":" + "00";
|
||||||
|
return dateTime;
|
||||||
|
},
|
||||||
|
// 获取明天时间
|
||||||
|
get_tomorrow() {
|
||||||
|
let date = new Date();
|
||||||
|
let y = date.getFullYear();
|
||||||
|
let m = date.getMonth() + 1;
|
||||||
|
m = m < 10 ? "0" + m : m;
|
||||||
|
let d = date.getDate() + 1;
|
||||||
|
d = d < 10 ? "0" + d : d;
|
||||||
|
let dateTime =
|
||||||
|
y + "-" + m + "-" + d + " " + "00" + ":" + "00" + ":" + "00";
|
||||||
|
return dateTime;
|
||||||
|
},
|
||||||
|
// 查询
|
||||||
|
search_data() {
|
||||||
|
// let param = {
|
||||||
|
// pageSize: this.pageSize,
|
||||||
|
// pageNum: this.pageNum,
|
||||||
|
// createTime:
|
||||||
|
// this.search.search_time == null
|
||||||
|
// ? ""
|
||||||
|
// : this.dateConversion(this.search.search_time[0]),
|
||||||
|
// updateTime:
|
||||||
|
// this.search.search_time == null
|
||||||
|
// ? ""
|
||||||
|
// : this.dateConversion(this.search.search_time[1]),
|
||||||
|
// searchValue: this.search.word,
|
||||||
|
// forumCode: "",
|
||||||
|
// };
|
||||||
|
// get_dispute_data(param).then((res) => {
|
||||||
|
// this.dispute_list = res.data;
|
||||||
|
// this.total = res.total;
|
||||||
|
// });
|
||||||
|
},
|
||||||
|
// 点击查看详情
|
||||||
|
check_item(val) {
|
||||||
|
this.$refs.companyDialog.open(val);
|
||||||
|
},
|
||||||
|
// 分页--每页多少条
|
||||||
|
size_change(val) {
|
||||||
|
this.pageNum = 1;
|
||||||
|
this.pageSize = val;
|
||||||
|
this.search_data();
|
||||||
|
},
|
||||||
|
// 分页--前往哪一页
|
||||||
|
num_change(val) {
|
||||||
|
this.pageNum = val;
|
||||||
|
this.search_data();
|
||||||
|
},
|
||||||
|
// 重置查询
|
||||||
|
reset() {
|
||||||
|
this.search.course_time = [this.get_today(), this.get_tomorrow()];
|
||||||
|
this.search.word = "";
|
||||||
|
this.search_data();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.item_search {
|
||||||
|
width: 94vw;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
/deep/.el-form {
|
||||||
|
display: flex;
|
||||||
|
.el-form-item {
|
||||||
|
display: flex;
|
||||||
|
margin-left: 0.5vw;
|
||||||
|
.el-date-editor--daterange.el-input__inner {
|
||||||
|
width: 440px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-form-item__label {
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.el-form-item__content {
|
||||||
|
.el-date-editor.el-range-editor.el-input__inner.el-date-editor--datetimerange {
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
border: 0.1px solid #28847e;
|
||||||
|
}
|
||||||
|
.el-input__inner {
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
border: 0.1px solid #28847e;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 查询框点击颜色变化 */
|
||||||
|
.el-input__inner:focus,
|
||||||
|
.el-input__inner:hover {
|
||||||
|
border-color: #2a968f;
|
||||||
|
}
|
||||||
|
.el-range-input {
|
||||||
|
color: #fff;
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-button {
|
||||||
|
border: 0.1px solid #28847e;
|
||||||
|
color: #fff;
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
&:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: -100%;
|
||||||
|
left: -50%;
|
||||||
|
width: 150%;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0 0 4px 1px #fff;
|
||||||
|
transform: rotateZ(-45deg);
|
||||||
|
}
|
||||||
|
&:hover::before {
|
||||||
|
transition: 0.7s;
|
||||||
|
top: 200%;
|
||||||
|
left: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-button:focus,
|
||||||
|
.el-button:hover {
|
||||||
|
color: #34e1b3;
|
||||||
|
background: #4d8f89;
|
||||||
|
border: 0.1px solid #137868;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/deep/.el-range-separator {
|
||||||
|
color: #fff;
|
||||||
|
width: 10%;
|
||||||
|
}
|
||||||
|
/deep/.el-input__icon.el-range__close-icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item_list {
|
||||||
|
width: 94vw;
|
||||||
|
height: 63vh;
|
||||||
|
// border: 0.1px solid #28847e;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-content: flex-start;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.dispute_item {
|
||||||
|
width: 22vw;
|
||||||
|
height: 20vh;
|
||||||
|
border: 0.1px solid #28847e;
|
||||||
|
margin-left: 0.7vw;
|
||||||
|
margin-right: 0.7vw;
|
||||||
|
margin-top: 0.5vh;
|
||||||
|
margin-bottom: 0.5vh;
|
||||||
|
.dispute_title {
|
||||||
|
width: 22vw;
|
||||||
|
height: 4vh;
|
||||||
|
background: linear-gradient(
|
||||||
|
to right,
|
||||||
|
rgba(0, 255, 247, 0.37),
|
||||||
|
rgba(0, 255, 247, 0)
|
||||||
|
);
|
||||||
|
.text {
|
||||||
|
color: aliceblue;
|
||||||
|
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||||
|
width: 5vw;
|
||||||
|
text-align: center;
|
||||||
|
height: 4vh;
|
||||||
|
line-height: 4vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.dispute_content {
|
||||||
|
width: 22vw;
|
||||||
|
height: 10vh;
|
||||||
|
.dispute_glossary {
|
||||||
|
width: 22vw;
|
||||||
|
height: 4vh;
|
||||||
|
display: flex;
|
||||||
|
.dispute_glossary_icon {
|
||||||
|
width: 2vw;
|
||||||
|
height: 4vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.icon_green {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background: url("~@/assets/applySupermarket/green.png") no-repeat !important;
|
||||||
|
background-size: 100% 100% !important;
|
||||||
|
animation-name: scale, high;
|
||||||
|
animation-duration: 3s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
}
|
||||||
|
@keyframes scale {
|
||||||
|
/*定义关键帧、scale是需要绑定到选择器的关键帧名称*/
|
||||||
|
0% {
|
||||||
|
transform: scale(0.8); /*开始为原始大小*/
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: scale(1); /*放大1.1倍*/
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes high {
|
||||||
|
0% {
|
||||||
|
filter: brightness(80%);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
filter: brightness(200%);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
filter: brightness(80%);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
filter: brightness(200%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
filter: brightness(80%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.dispute_glossary_text {
|
||||||
|
width: 4.3vw;
|
||||||
|
height: 4vh;
|
||||||
|
line-height: 4vh;
|
||||||
|
color: aliceblue;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.dispute_glossary_value {
|
||||||
|
width: 15.5vw;
|
||||||
|
height: 4vh;
|
||||||
|
line-height: 4vh;
|
||||||
|
color: #fff;
|
||||||
|
text-align: left;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.dispute_company {
|
||||||
|
width: 22vw;
|
||||||
|
height: 4vh;
|
||||||
|
display: flex;
|
||||||
|
.dispute_company_icon {
|
||||||
|
width: 2vw;
|
||||||
|
height: 4vh;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 4vh;
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.dispute_company_name {
|
||||||
|
width: 4.3vw;
|
||||||
|
height: 4vh;
|
||||||
|
line-height: 4vh;
|
||||||
|
color: aliceblue;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.dispute_company_name_value {
|
||||||
|
width: 15vw;
|
||||||
|
height: 4vh;
|
||||||
|
line-height: 4vh;
|
||||||
|
color: #fff;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.dispute_time {
|
||||||
|
width: 22vw;
|
||||||
|
height: 4vh;
|
||||||
|
display: flex;
|
||||||
|
.dispute_time_icon {
|
||||||
|
width: 2vw;
|
||||||
|
height: 4vh;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 4vh;
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.dispute_time_text {
|
||||||
|
width: 4.3vw;
|
||||||
|
height: 4vh;
|
||||||
|
line-height: 4vh;
|
||||||
|
color: aliceblue;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.dispute_time_value {
|
||||||
|
width: 8.7vw;
|
||||||
|
height: 4vh;
|
||||||
|
line-height: 4vh;
|
||||||
|
color: #fff;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.dispute_btn {
|
||||||
|
width: 7vw;
|
||||||
|
height: 4vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.el-button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 13px;
|
||||||
|
height: 4vh;
|
||||||
|
color: #fff;
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
border: 0.1px solid rgba(0, 0, 0, 0);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
&:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: -100%;
|
||||||
|
left: -50%;
|
||||||
|
width: 150%;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0 0 4px 1px #fff;
|
||||||
|
transform: rotateZ(-45deg);
|
||||||
|
}
|
||||||
|
&:hover::before {
|
||||||
|
transition: 0.7s;
|
||||||
|
top: 200%;
|
||||||
|
left: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-button:hover {
|
||||||
|
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.dispute_status {
|
||||||
|
width: 22vw;
|
||||||
|
height: 4vh;
|
||||||
|
display: flex;
|
||||||
|
.dispute_status_icon {
|
||||||
|
width: 2vw;
|
||||||
|
height: 4vh;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 4vh;
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.dispute_status_text {
|
||||||
|
width: 4.3vw;
|
||||||
|
height: 4vh;
|
||||||
|
line-height: 4vh;
|
||||||
|
color: aliceblue;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.dispute_status_value {
|
||||||
|
width: 8.7vw;
|
||||||
|
height: 4vh;
|
||||||
|
line-height: 4vh;
|
||||||
|
color: #fff;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,84 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
class="dialog"
|
||||||
|
title="反馈详情"
|
||||||
|
:visible.sync="visible"
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
width="1100px"
|
||||||
|
@close="close"
|
||||||
|
>
|
||||||
|
<div class="text">
|
||||||
|
<div v-html="this.text"></div>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
// import { get_counter_item } from "@/api/applySupermarket/counterfraud";
|
||||||
|
export default {
|
||||||
|
name: "FeedbackDialog",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
visible: false,
|
||||||
|
text: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
open(item) {
|
||||||
|
this.visible = true;
|
||||||
|
console.log('item',item);
|
||||||
|
// 请求返回文本
|
||||||
|
// get_counter_item(item.id).then((res) => {
|
||||||
|
// console.log("id", res.data.content);
|
||||||
|
// this.text = res.data.content;
|
||||||
|
// });
|
||||||
|
},
|
||||||
|
close() {
|
||||||
|
this.visible = false;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
/deep/.el-dialog {
|
||||||
|
.el-dialog__title {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 19px;
|
||||||
|
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||||
|
}
|
||||||
|
background-image: url("~@/assets/companyFile/dialogBack.png");
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
height: 680px;
|
||||||
|
/* 关闭弹窗叉号 */
|
||||||
|
.el-dialog__headerbtn {
|
||||||
|
.el-dialog__close {
|
||||||
|
color: #e55b5b;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-dialog__body {
|
||||||
|
padding: 0px;
|
||||||
|
padding-left: 15px;
|
||||||
|
padding-right: 15px;
|
||||||
|
.text {
|
||||||
|
margin-top: 20px;
|
||||||
|
overflow-y: scroll;
|
||||||
|
// border: 0.1px solid #28847e;
|
||||||
|
height: 600px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.text::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
background-color: rbga(0,0,0,0);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text::-webkit-scrollbar-thumb {
|
||||||
|
width: 5px;
|
||||||
|
background-color: #28847e;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,546 @@
|
|||||||
|
<!-- 企业反馈 -->
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- 查询 -->
|
||||||
|
<div class="item_search">
|
||||||
|
<el-form :model="search" class="search_form">
|
||||||
|
<el-form-item label="反馈时间">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="search.search_time"
|
||||||
|
type="datetimerange"
|
||||||
|
range-separator="至"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="企业名称">
|
||||||
|
<el-input
|
||||||
|
v-model="search.word"
|
||||||
|
placeholder="请输入企业名称"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button icon="el-icon-search" @click="search_data">搜索</el-button>
|
||||||
|
<el-button icon="el-icon-refresh-right" @click="reset"
|
||||||
|
>重置</el-button
|
||||||
|
>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<!-- 反馈展示 -->
|
||||||
|
<div class="item_list">
|
||||||
|
<div v-for="item in feedback_list" :key="item.id" class="feedback_item">
|
||||||
|
<div class="feedback_title">
|
||||||
|
<div class="text">{{ item.company }}</div>
|
||||||
|
<div class="feedback_content">
|
||||||
|
<!-- 反馈简要 -->
|
||||||
|
<div class="feedback_glossary">
|
||||||
|
<div class="feedback_glossary_icon">
|
||||||
|
<div class="icon_green"></div>
|
||||||
|
</div>
|
||||||
|
<div class="feedback_glossary_text">反馈简要:</div>
|
||||||
|
<div :title="item.title" class="feedback_glossary_value">
|
||||||
|
{{ item.title }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 反馈时间 -->
|
||||||
|
<div class="feedback_time">
|
||||||
|
<div class="feedback_time_icon">
|
||||||
|
<i class="el-icon-alarm-clock"></i>
|
||||||
|
</div>
|
||||||
|
<div class="feedback_time_text">反馈时间:</div>
|
||||||
|
<div class="feedback_time_value">{{ item.modifyTime }}</div>
|
||||||
|
<!-- 查看详情按钮 -->
|
||||||
|
<div class="feedback_btn">
|
||||||
|
<el-button
|
||||||
|
size="small"
|
||||||
|
icon="el-icon-s-promotion"
|
||||||
|
@click="check_item(item)"
|
||||||
|
>查看详情</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 分页 -->
|
||||||
|
<lkyPagination
|
||||||
|
:page_sizes="page_sizes"
|
||||||
|
:pageSize="pageSize"
|
||||||
|
:pageNum="pageNum"
|
||||||
|
:total="total"
|
||||||
|
:pagination_width="pagination_width"
|
||||||
|
@size_change="size_change"
|
||||||
|
@num_change="num_change"
|
||||||
|
></lkyPagination>
|
||||||
|
<FeedbackDialog ref="feedbackDialog"></FeedbackDialog>
|
||||||
|
<!-- <CounterDialog ref="counterDialog"></CounterDialog> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import FeedbackDialog from "./components/feedbackDialog";
|
||||||
|
export default {
|
||||||
|
name: "CompanyFeedback",
|
||||||
|
components: {
|
||||||
|
FeedbackDialog,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
search: {
|
||||||
|
search_time: [this.get_today(), this.get_tomorrow()],
|
||||||
|
word: "",
|
||||||
|
},
|
||||||
|
feedback_list: [
|
||||||
|
{
|
||||||
|
id: "1",
|
||||||
|
company: "宁波中金石化有限公司",
|
||||||
|
title: "宁波中金石化有限公司厂房安全测试相关反馈情况",
|
||||||
|
modifyTime: "2023-10-21 09:21:11",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "2",
|
||||||
|
company: "宁波中金石化有限公司",
|
||||||
|
title: "宁波中金石化有限公司厂房安全测试相关反馈情况",
|
||||||
|
modifyTime: "2023-10-21 09:21:11",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3",
|
||||||
|
company: "宁波中金石化有限公司",
|
||||||
|
title: "宁波中金石化有限公司厂房安全测试相关反馈情况",
|
||||||
|
modifyTime: "2023-10-21 09:21:11",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "4",
|
||||||
|
company: "宁波中金石化有限公司",
|
||||||
|
title: "宁波中金石化有限公司厂房安全测试相关反馈情况",
|
||||||
|
modifyTime: "2023-10-21 09:21:11",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "5",
|
||||||
|
company: "宁波中金石化有限公司",
|
||||||
|
title: "宁波中金石化有限公司厂房安全测试相关反馈情况",
|
||||||
|
modifyTime: "2023-10-21 09:21:11",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "6",
|
||||||
|
company: "宁波中金石化有限公司",
|
||||||
|
title: "宁波中金石化有限公司厂房安全测试相关反馈情况",
|
||||||
|
modifyTime: "2023-10-21 09:21:11",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "7",
|
||||||
|
company: "宁波中金石化有限公司",
|
||||||
|
title: "宁波中金石化有限公司厂房安全测试相关反馈情况",
|
||||||
|
modifyTime: "2023-10-21 09:21:11",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "8",
|
||||||
|
company: "宁波中金石化有限公司",
|
||||||
|
title: "宁波中金石化有限公司厂房安全测试相关反馈情况",
|
||||||
|
modifyTime: "2023-10-21 09:21:11",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "9",
|
||||||
|
company: "宁波中金石化有限公司",
|
||||||
|
title: "宁波中金石化有限公司厂房安全测试相关反馈情况",
|
||||||
|
modifyTime: "2023-10-21 09:21:11",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "10",
|
||||||
|
company: "宁波中金石化有限公司",
|
||||||
|
title: "宁波中金石化有限公司厂房安全测试相关反馈情况",
|
||||||
|
modifyTime: "2023-10-21 09:21:11",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "11",
|
||||||
|
company: "宁波中金石化有限公司",
|
||||||
|
title: "宁波中金石化有限公司厂房安全测试相关反馈情况",
|
||||||
|
modifyTime: "2023-10-21 09:21:11",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "12",
|
||||||
|
company: "宁波中金石化有限公司",
|
||||||
|
title: "宁波中金石化有限公司厂房安全测试相关反馈情况",
|
||||||
|
modifyTime: "2023-10-21 09:21:11",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "13",
|
||||||
|
company: "宁波中金石化有限公司",
|
||||||
|
title: "宁波中金石化有限公司厂房安全测试相关反馈情况",
|
||||||
|
modifyTime: "2023-10-21 09:21:11",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "14",
|
||||||
|
company: "宁波中金石化有限公司",
|
||||||
|
title: "宁波中金石化有限公司厂房安全测试相关反馈情况",
|
||||||
|
modifyTime: "2023-10-21 09:21:11",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "15",
|
||||||
|
company: "宁波中金石化有限公司",
|
||||||
|
title: "宁波中金石化有限公司厂房安全测试相关反馈情况",
|
||||||
|
modifyTime: "2023-10-21 09:21:11",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "16",
|
||||||
|
company: "宁波中金石化有限公司",
|
||||||
|
title: "宁波中金石化有限公司厂房安全测试相关反馈情况",
|
||||||
|
modifyTime: "2023-10-21 09:21:11",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
pageSize: 16,
|
||||||
|
pageNum: 1,
|
||||||
|
total: 16,
|
||||||
|
page_sizes: [16],
|
||||||
|
pagination_width: "94",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.search_data();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 转换时间格式
|
||||||
|
dateConversion(value) {
|
||||||
|
let date = new Date(value);
|
||||||
|
let y = date.getFullYear();
|
||||||
|
let m = date.getMonth() + 1;
|
||||||
|
m = m < 10 ? "0" + m : m;
|
||||||
|
let d = date.getDate();
|
||||||
|
d = d < 10 ? "0" + d : d;
|
||||||
|
let h = date.getHours();
|
||||||
|
h = h < 10 ? "0" + h : h;
|
||||||
|
let M = date.getMinutes();
|
||||||
|
M = M < 10 ? "0" + M : M;
|
||||||
|
let s = date.getSeconds();
|
||||||
|
s = s < 10 ? "0" + s : s;
|
||||||
|
let dateTime = y + "-" + m + "-" + d + " " + h + ":" + M + ":" + s;
|
||||||
|
return dateTime;
|
||||||
|
},
|
||||||
|
// 获取当前时间
|
||||||
|
get_today() {
|
||||||
|
let date = new Date();
|
||||||
|
let y = date.getFullYear();
|
||||||
|
let m = date.getMonth() + 1;
|
||||||
|
m = m < 10 ? "0" + m : m;
|
||||||
|
let d = date.getDate();
|
||||||
|
d = d < 10 ? "0" + d : d;
|
||||||
|
let dateTime =
|
||||||
|
y + "-" + m + "-" + d + " " + "00" + ":" + "00" + ":" + "00";
|
||||||
|
return dateTime;
|
||||||
|
},
|
||||||
|
// 获取明天时间
|
||||||
|
get_tomorrow() {
|
||||||
|
let date = new Date();
|
||||||
|
let y = date.getFullYear();
|
||||||
|
let m = date.getMonth() + 1;
|
||||||
|
m = m < 10 ? "0" + m : m;
|
||||||
|
let d = date.getDate() + 1;
|
||||||
|
d = d < 10 ? "0" + d : d;
|
||||||
|
let dateTime =
|
||||||
|
y + "-" + m + "-" + d + " " + "00" + ":" + "00" + ":" + "00";
|
||||||
|
return dateTime;
|
||||||
|
},
|
||||||
|
// 查询
|
||||||
|
// search_data() {
|
||||||
|
// let param = {
|
||||||
|
// pageSize: this.pageSize,
|
||||||
|
// pageNum: this.pageNum,
|
||||||
|
// createTime:
|
||||||
|
// this.search.search_time == null
|
||||||
|
// ? ""
|
||||||
|
// : this.dateConversion(this.search.search_time[0]),
|
||||||
|
// updateTime:
|
||||||
|
// this.search.search_time == null
|
||||||
|
// ? ""
|
||||||
|
// : this.dateConversion(this.search.search_time[1]),
|
||||||
|
// searchValue: this.search.word,
|
||||||
|
// forumCode: "", // 反诈提醒
|
||||||
|
// };
|
||||||
|
// get_feedback_data(param).then((res) => {
|
||||||
|
// this.feedback_list = res.data;
|
||||||
|
// this.total = res.total;
|
||||||
|
// });
|
||||||
|
// },
|
||||||
|
// 点击查看详情
|
||||||
|
check_item(val) {
|
||||||
|
this.$refs.feedbackDialog.open(val);
|
||||||
|
},
|
||||||
|
// 分页--每页多少条
|
||||||
|
size_change(val) {
|
||||||
|
this.pageNum = 1;
|
||||||
|
this.pageSize = val;
|
||||||
|
this.search_data();
|
||||||
|
},
|
||||||
|
// 分页--前往哪一页
|
||||||
|
num_change(val) {
|
||||||
|
this.pageNum = val;
|
||||||
|
this.search_data();
|
||||||
|
},
|
||||||
|
// 重置查询
|
||||||
|
reset() {
|
||||||
|
this.search.course_time = [this.get_today(), this.get_tomorrow()];
|
||||||
|
this.search.word = "";
|
||||||
|
this.search_data();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.item_search {
|
||||||
|
width: 94vw;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
/deep/.el-form {
|
||||||
|
display: flex;
|
||||||
|
.el-form-item {
|
||||||
|
display: flex;
|
||||||
|
margin-left: 0.5vw;
|
||||||
|
.el-date-editor--daterange.el-input__inner {
|
||||||
|
width: 440px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-form-item__label {
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.el-form-item__content {
|
||||||
|
.el-date-editor.el-range-editor.el-input__inner.el-date-editor--datetimerange {
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
border: 0.1px solid #28847e;
|
||||||
|
}
|
||||||
|
.el-input__inner {
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
border: 0.1px solid #28847e;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 查询框点击颜色变化 */
|
||||||
|
.el-input__inner:focus,
|
||||||
|
.el-input__inner:hover {
|
||||||
|
border-color: #2a968f;
|
||||||
|
}
|
||||||
|
.el-range-input {
|
||||||
|
color: #fff;
|
||||||
|
background: #283436;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-button {
|
||||||
|
border: 0.1px solid #28847e;
|
||||||
|
color: #fff;
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
&:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: -100%;
|
||||||
|
left: -50%;
|
||||||
|
width: 150%;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0 0 4px 1px #fff;
|
||||||
|
transform: rotateZ(-45deg);
|
||||||
|
}
|
||||||
|
&:hover::before {
|
||||||
|
transition: 0.7s;
|
||||||
|
top: 200%;
|
||||||
|
left: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-button:focus,
|
||||||
|
.el-button:hover {
|
||||||
|
color: #34e1b3;
|
||||||
|
background: #4d8f89;
|
||||||
|
border: 0.1px solid #137868;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/deep/.el-range-separator {
|
||||||
|
color: #fff;
|
||||||
|
width: 10%;
|
||||||
|
}
|
||||||
|
/deep/.el-input__icon.el-range__close-icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item_list {
|
||||||
|
width: 94vw;
|
||||||
|
height: 62vh;
|
||||||
|
// border: 0.1px solid #28847e;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-content: flex-start;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.feedback_item {
|
||||||
|
width: 22vw;
|
||||||
|
height: 14vh;
|
||||||
|
border: 0.1px solid #28847e;
|
||||||
|
margin-left: 0.7vw;
|
||||||
|
margin-right: 0.7vw;
|
||||||
|
margin-top: 0.7vh;
|
||||||
|
margin-bottom: 0.7vh;
|
||||||
|
.feedback_title {
|
||||||
|
width: 22vw;
|
||||||
|
height: 4vh;
|
||||||
|
background: linear-gradient(
|
||||||
|
to right,
|
||||||
|
rgba(0, 255, 247, 0.37),
|
||||||
|
rgba(0, 255, 247, 0)
|
||||||
|
);
|
||||||
|
.text {
|
||||||
|
margin-left: 5px;
|
||||||
|
color: aliceblue;
|
||||||
|
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||||
|
width: 20vw;
|
||||||
|
text-align: left;
|
||||||
|
height: 4vh;
|
||||||
|
line-height: 4vh;
|
||||||
|
}
|
||||||
|
.feedback_content {
|
||||||
|
width: 22vw;
|
||||||
|
height: 10vh;
|
||||||
|
.feedback_glossary {
|
||||||
|
width: 22vw;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
.feedback_glossary_icon {
|
||||||
|
width: 2vw;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.icon_green {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background: url("~@/assets/applySupermarket/green.png") no-repeat !important;
|
||||||
|
background-size: 100% 100% !important;
|
||||||
|
animation-name: scale, high;
|
||||||
|
animation-duration: 3s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
}
|
||||||
|
@keyframes scale {
|
||||||
|
/*定义关键帧、scale是需要绑定到选择器的关键帧名称*/
|
||||||
|
0% {
|
||||||
|
transform: scale(0.8); /*开始为原始大小*/
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: scale(1); /*放大1.1倍*/
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes high {
|
||||||
|
0% {
|
||||||
|
filter: brightness(80%);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
filter: brightness(200%);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
filter: brightness(80%);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
filter: brightness(200%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
filter: brightness(80%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.feedback_glossary_text {
|
||||||
|
width: 4.3vw;
|
||||||
|
height: 5vh;
|
||||||
|
line-height: 5vh;
|
||||||
|
color: aliceblue;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.feedback_glossary_value {
|
||||||
|
width: 15.5vw;
|
||||||
|
height: 5vh;
|
||||||
|
line-height: 5vh;
|
||||||
|
color: #fff;
|
||||||
|
text-align: left;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.feedback_time {
|
||||||
|
width: 22vw;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
.feedback_time_icon {
|
||||||
|
width: 2vw;
|
||||||
|
height: 5vh;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 5vh;
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.feedback_time_text {
|
||||||
|
width: 4.3vw;
|
||||||
|
height: 5vh;
|
||||||
|
line-height: 5vh;
|
||||||
|
color: aliceblue;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.feedback_time_value {
|
||||||
|
width: 8.7vw;
|
||||||
|
height: 5vh;
|
||||||
|
line-height: 5vh;
|
||||||
|
color: #fff;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.feedback_btn {
|
||||||
|
width: 7vw;
|
||||||
|
height: 5vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.el-button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 13px;
|
||||||
|
height: 4vh;
|
||||||
|
color: #fff;
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
border: 0.1px solid rgba(0, 0, 0, 0);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
&:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: -100%;
|
||||||
|
left: -50%;
|
||||||
|
width: 150%;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0 0 4px 1px #fff;
|
||||||
|
transform: rotateZ(-45deg);
|
||||||
|
}
|
||||||
|
&:hover::before {
|
||||||
|
transition: 0.7s;
|
||||||
|
top: 200%;
|
||||||
|
left: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-button:hover {
|
||||||
|
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue