index.vue
1.91 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<template>
<view class="container">
<Navbar bgColor="#ff630c" title="配送工主页" :textColor="'#ffffff'" :canBack="true"></Navbar>
<view class="topContentCss"></view>
<view class="cardAreaCss" >
<!-- 员工信息 -->
<userInfoCard :userInfo="userInfoData"></userInfoCard>
<!-- 头部气瓶背景文字 -->
<!-- 消息轮播 -->
<u-notice-bar class="margin-top" :text="text" direction="column" color="#EB5C11" bgColor="#F1E4DB" speed="50"
url="/pages/componentsB/tag/tag"></u-notice-bar>
<functionCard ></functionCard>
</view>
</view>
</template>
<script>
import userInfoImg from '@/static/images/mine/userInfo.png'
import userInfoCard from "./components/userInfoCard";
import functionCard from "./components/functionCard"
export default {
components:{
userInfoCard,
functionCard
},
mounted(){},
data(){
return {
text: [
'为了您和家人的安全,请不要使用过期的石油气钢瓶',
'温馨提示'
],
userInfoData:{
imgSrc:userInfoImg,
name:'任巧生',
address:'孝感城南液化石油气',
phone:'181****4021'
}
}
},
methods:{},
}
</script>
<style lang="scss" scoped>
.container{
::v-deep.u-icon__icon{
color: #ffffff!important;
}
.topContentCss {
position: relative;
width: 100%;
height: 200px;
//background: #EA5504;
background: linear-gradient(180deg, rgba(255, 99, 12, 1) 0%, rgba(242, 244, 243, 1) 100%);
border-radius: 0 0 30px 30px;
color: #fff;
.topBarCss {
height: 65px;
}
.authCss {
border-radius: 30px 0 0 30px;
background: #fff;
// width: 0px;
padding: 5px;
}
.chatCss {
// position: absolute;
// margin: -10px 0 0 -10px;
}
}
.cardAreaCss {
position: relative;
top: -150px;
margin: 0px 10px;
color: #000;
}
}
</style>