Compare commits

...

2 Commits

Binary file not shown.

After

Width:  |  Height:  |  Size: 250 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

@ -2,7 +2,7 @@ import axios from 'axios'
// import { getToken } from '@/utils/token'
const baseURL = 'http://50.146.63.43:20000/'
// const baseURL = ''
//const baseURL = `http://${window.location.host}/`
// axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
const request = axios.create({
baseURL,

@ -69,7 +69,52 @@
</div>
<!-- 滚动区域 -->
<div class="roll_body">
<PersonScroll></PersonScroll>
<ul class="marquee-list" :class="{ 'animate-up': animateUp }">
<li v-for="(item, index) in roll_list" :key="index">
<div class="roll_item_left">
<div class="roll_item_pic"></div>
<div class="roll_item_btn">查看详情</div>
</div>
<div class="roll_item_right">
<div v-if="item.per_type == '1'" class="person_type one_type">
{{ item.type_text }}
</div>
<div
v-else-if="item.per_type == '2'"
class="person_type two_type"
>
{{ item.type_text }}
</div>
<div
v-else-if="item.per_type == '3'"
class="person_type three_type"
>
{{ item.type_text }}
</div>
<!-- 信息展示 -->
<div class="right_text">
<div class="right_text_item">人员姓名</div>
<div class="right_text_item">联系电话</div>
<div class="right_text_item">证件号码</div>
<div class="right_text_item">户籍地址</div>
<div class="right_text_item">现住地址</div>
</div>
<div class="right_value">
<div class="right_value_item">{{ item.person_name }}</div>
<div class="right_value_item">{{ item.phone_num }}</div>
<div class="right_value_item" :title="item.id_card">
{{ item.id_card }}
</div>
<div class="right_value_item" :title="item.old_address">
{{ item.old_address }}
</div>
<div class="right_value_item" :title="item.new_address">
{{ item.new_address }}
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
@ -83,13 +128,106 @@ export default {
components: { PersonScroll },
data() {
return {
title_text: '重点人员'
// *
// carouselData: [{ id: 1 }]
}
title_text: "重点人员",
roll_list: [
{
text: "123",
per_type: "1",
type_text: "在逃人员",
person_name: "周大山",
phone_num: "13455674532",
id_card: "321287197606038965",
old_address: "射阳县解放路74号",
new_address: "江苏省射阳县海河镇革新村二组113号",
},
{
text: "1243",
per_type: "3",
type_text: "涉恐人员",
person_name: "王富强",
phone_num: "13455674532",
id_card: "321287197606038965",
old_address: "射阳县解放路74号",
new_address: "江苏省射阳县海河镇革新村二组113号",
},
{
text: "12323",
per_type: "2",
type_text: "精神病人",
person_name: "赵磊",
phone_num: "13455674532",
id_card: "321287197606038965",
old_address: "射阳县解放路74号",
new_address: "江苏省射阳县海河镇革新村二组113号",
},
{
text: "1243",
per_type: "2",
type_text: "精神病人",
person_name: "徐永",
phone_num: "13455674532",
id_card: "321287197606038965",
old_address: "射阳县解放路74号",
new_address: "江苏省射阳县海河镇革新村二组113号",
},
{
text: "1223",
per_type: "2",
type_text: "精神病人",
person_name: "李文一",
phone_num: "13455674532",
id_card: "321287197606038965",
old_address: "射阳县解放路74号",
new_address: "江苏省射阳县海河镇革新村二组113号",
},
{
text: "1223",
per_type: "1",
type_text: "在逃人员",
person_name: "谭静",
phone_num: "13455674532",
id_card: "321287197606038965",
old_address: "射阳县解放路74号",
new_address: "江苏省射阳县海河镇革新村二组113号",
},
{
text: "1243",
per_type: "3",
type_text: "涉恐人员",
person_name: "孙洋洋",
phone_num: "13455674532",
id_card: "321287197606038965",
old_address: "射阳县解放路74号",
new_address: "江苏省射阳县海河镇革新村二组113号",
},
{
text: "1223",
per_type: "1",
type_text: "在逃人员",
person_name: "董磊",
phone_num: "13455674532",
id_card: "321287197606038965",
old_address: "射阳县解放路74号",
new_address: "江苏省射阳县海河镇革新村二组113号",
},
{
text: "1223",
per_type: "2",
type_text: "精神病人",
person_name: "郑廖",
phone_num: "13455674532",
id_card: "321287197606038965",
old_address: "射阳县解放路74号",
new_address: "江苏省射阳县海河镇革新村二组113号",
},
],
animateUp: false,
timer: null,
};
},
mounted() {
this.init_charts()
this.init_charts();
this.timer = setInterval(this.scrollAnimate, 1500);
},
methods: {
init_charts() {
@ -136,16 +274,25 @@ export default {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
option && myChart.setOption(option)
}
}
}
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
};
option && myChart.setOption(option);
},
//
scrollAnimate() {
this.animateUp = true;
setTimeout(() => {
this.roll_list.push(this.roll_list[0]);
this.roll_list.shift();
this.animateUp = false;
}, 500);
},
},
};
</script>
<style lang="scss" scoped>
.key_body {
@ -274,11 +421,113 @@ export default {
}
}
}
.roll_body {
width: 20vw;
height: 48vh;
// background: #00f5ff;
overflow: hidden;
.marquee-list {
width: 20vw;
height: 48vh;
padding: 0px;
li {
margin-left: 2%;
margin-right: 2%;
width: 96%;
height: 15vh;
background: url("~@/assets/coastalMap/keyPerson/key_li_back.png")
no-repeat;
background-size: 100% 100%;
margin-top: 1vh;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
list-style: none;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 48vh;
.roll_item_left {
width: 5vw;
height: 13vh;
.roll_item_pic {
width: 5vw;
height: 10vh;
background: #0b4672;
}
.roll_item_btn {
width: 5vw;
height: 3vh;
color: #fff;
background: #00f5ff;
font-size: 16px;
font-weight: 400;
text-align: center;
line-height: 3vh;
cursor: pointer;
background: url("~@/assets/coastalMap/keyPerson/key_li_btn.png")
no-repeat;
background-size: 100% 100%;
}
}
.roll_item_right {
width: 13vw;
height: 13vh;
position: relative;
display: flex;
.person_type {
position: absolute;
width: 3vw;
height: 2vh;
top: 0px;
right: 0px;
color: #061122;
text-align: center;
line-height: 2vh;
}
.one_type {
background: #ffc426;
}
.two_type {
background: #00f5ff;
}
.three_type {
background: #a357ff;
}
.right_text {
width: 5vw;
height: 13vh;
.right_text_item {
width: 5vw;
height: 2.6vh;
color: #ecf4f9;
font-size: 14px;
text-align: center;
line-height: 2.6vh;
}
}
.right_value {
width: 8vw;
height: 13vh;
.right_value_item {
width: 8vw;
height: 2.6vh;
color: #edf1f7;
font-size: 14px;
text-align: left;
line-height: 2.6vh;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
}
}
}
.animate-up {
transition: all 0.8s ease-in-out;
transform: translateY(-20vh);
}
}
}
}

Loading…
Cancel
Save