天府星
This commit is contained in:
yanran200730
@@ -31,6 +31,11 @@
|
||||
<AiEmpty v-if="!list.length"></AiEmpty>
|
||||
</div>
|
||||
<div class="btn-wrapper">
|
||||
<div class="top">
|
||||
<i v-show="!isChoose" @click="isChoose = !isChoose"></i>
|
||||
<image class="bg-img" @click="isChoose = !isChoose" v-show="isChoose" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/Selected.png" />
|
||||
<span>同意将上传的内容公开分享到文明广场</span>
|
||||
</div>
|
||||
<div class="btn" @click="upload" hover-class="text-hover">拍照上传</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -51,7 +56,8 @@
|
||||
hideStatus: false,
|
||||
pageShow: false,
|
||||
current: 1,
|
||||
isMore: false
|
||||
isMore: false,
|
||||
isChoose: true
|
||||
}
|
||||
},
|
||||
|
||||
@@ -208,196 +214,221 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" socped>
|
||||
.photo {
|
||||
width: 100vw;
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 130px;
|
||||
.photo {
|
||||
width: 100vw;
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 200px;
|
||||
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: #2D7DFF;
|
||||
}
|
||||
|
||||
.back-wrapper {
|
||||
position: fixed;
|
||||
z-index: 11;
|
||||
left: 20px;
|
||||
top: 24px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
image {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&.header-active {
|
||||
z-index: 1111;
|
||||
opacity: 1;
|
||||
background: linear-gradient(180deg, #2D7DFF 0%, #2D7DFF 40%);
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
position: relative;
|
||||
height: 88px;
|
||||
line-height: 88px;
|
||||
color: #fff;
|
||||
font-size: 32px;
|
||||
text-align: center;
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 24px 20px 0 20px;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.photo-header {
|
||||
position: relative;
|
||||
height: 448px;
|
||||
padding: 150px 48px 0;
|
||||
|
||||
.bg-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 448px;
|
||||
}
|
||||
|
||||
.right-icon {
|
||||
position: absolute;
|
||||
top: 105px;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
width: 304px;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 700;
|
||||
font-size: 64px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
p {
|
||||
z-index: 2;
|
||||
width: 420px;
|
||||
height: 80px;
|
||||
line-height: 1.3;
|
||||
font-size: 28px;
|
||||
color: #658DC1;
|
||||
}
|
||||
}
|
||||
|
||||
.phone-wrapper {
|
||||
margin-top: 26px;
|
||||
padding: 0 32px;
|
||||
|
||||
& > h2 {
|
||||
margin-bottom: 42px;
|
||||
font-size: 34px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.list {
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 32px 20px;
|
||||
|
||||
.item {
|
||||
image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
i {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid #2D7DFF;
|
||||
box-sizing: border-box;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 26px;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: #2D7DFF;
|
||||
}
|
||||
|
||||
.back-wrapper {
|
||||
position: fixed;
|
||||
z-index: 11;
|
||||
left: 20px;
|
||||
top: 24px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
image {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&.header-active {
|
||||
z-index: 1111;
|
||||
opacity: 1;
|
||||
background: linear-gradient(180deg, #2D7DFF 0%, #2D7DFF 40%);
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
position: relative;
|
||||
width: 336px;
|
||||
height: 252px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
|
||||
& > span {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
z-index: 2;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
padding: 0 16px;
|
||||
font-size: 26px;
|
||||
text-align: center;
|
||||
color: #FF883C;
|
||||
background: rgba($color: #000000, $alpha: 0.8);
|
||||
border-radius: 8px;
|
||||
|
||||
&.status-1 {
|
||||
color: #3BBC37;
|
||||
}
|
||||
|
||||
&.status-2 {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
justify-content: space-between;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
padding: 28px 16px 0;
|
||||
background-image: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, #000000 100%);
|
||||
border-radius: 0 0 16px 16px;
|
||||
text-align: center;
|
||||
color: #FF883C;
|
||||
border-radius: 8px;
|
||||
|
||||
i {
|
||||
font-size: 26px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 26px;
|
||||
color: #FFB94C;
|
||||
}
|
||||
}
|
||||
height: 88px;
|
||||
line-height: 88px;
|
||||
color: #fff;
|
||||
font-size: 32px;
|
||||
text-align: center;
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 24px 20px 0 20px;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.photo-header {
|
||||
position: relative;
|
||||
height: 448px;
|
||||
padding: 150px 48px 0;
|
||||
|
||||
.bg-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 448px;
|
||||
}
|
||||
|
||||
.right-icon {
|
||||
position: absolute;
|
||||
top: 105px;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
width: 304px;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 700;
|
||||
font-size: 64px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
p {
|
||||
z-index: 2;
|
||||
width: 420px;
|
||||
height: 80px;
|
||||
line-height: 1.3;
|
||||
font-size: 28px;
|
||||
color: #658DC1;
|
||||
}
|
||||
}
|
||||
|
||||
.phone-wrapper {
|
||||
margin-top: 26px;
|
||||
padding: 0 32px;
|
||||
|
||||
& > h2 {
|
||||
margin-bottom: 42px;
|
||||
font-size: 34px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
width: 336px;
|
||||
height: 252px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
|
||||
& > span {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
z-index: 2;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
padding: 0 16px;
|
||||
font-size: 26px;
|
||||
text-align: center;
|
||||
color: #FF883C;
|
||||
background: rgba($color: #000000, $alpha: 0.8);
|
||||
border-radius: 8px;
|
||||
|
||||
&.status-1 {
|
||||
color: #3BBC37;
|
||||
}
|
||||
|
||||
&.status-2 {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
justify-content: space-between;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
padding: 28px 16px 0;
|
||||
background-image: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, #000000 100%);
|
||||
border-radius: 0 0 16px 16px;
|
||||
text-align: center;
|
||||
color: #FF883C;
|
||||
border-radius: 8px;
|
||||
|
||||
i {
|
||||
font-size: 26px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 26px;
|
||||
color: #FFB94C;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user