|
|
@@ -2,35 +2,38 @@
|
|
|
<div class="my">
|
|
|
<div class="mine-resume">
|
|
|
<div class="bgImg">
|
|
|
+ <img src="@/assets/images/my/personal/bgImg.png" alt="" />
|
|
|
+ </div>
|
|
|
|
|
|
<div class="my-info">
|
|
|
-<!-- <img src="@/assets/images/my/personal/my-info.png" alt="" />-->
|
|
|
+ <div class="my-info-bg">
|
|
|
+ <img src="@/assets/images/my/personal/my-info.png" alt="" />
|
|
|
+ </div>
|
|
|
<div class="mine-resume-main">
|
|
|
- <ul class="clear headerBox">
|
|
|
- <div class="headerImg">
|
|
|
+ <div class="clear headerBox">
|
|
|
+ <div class="clear headerImg">
|
|
|
<img :src="header" alt="" />
|
|
|
<div class="header-info">
|
|
|
<p>欢迎您!</p>
|
|
|
<span>尊敬的金卡用户</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="headerDesc">
|
|
|
+ <ul class="headerDesc clear">
|
|
|
<li v-if="userData === null">
|
|
|
<p class="title"><span>登录</span></p>
|
|
|
</li>
|
|
|
<li v-else class="usable">
|
|
|
- <span>有效期至{{ userData.expiretime }}</span>
|
|
|
+ <div>有效期至:{{ userData.expiretime }}</div>
|
|
|
</li>
|
|
|
<li class="header-username">
|
|
|
- <span>NO:{{ username }}</span>
|
|
|
+ <div>NO:{{ username }}</div>
|
|
|
</li>
|
|
|
- </div>
|
|
|
- </ul>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+
|
|
|
<div class="top">
|
|
|
- <!-- 我的页面下待收，待发、售后盒子 -->
|
|
|
<p>我的订单</p>
|
|
|
<ul class="cell-vip">
|
|
|
<li
|
|
|
@@ -65,9 +68,9 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
- <div class="my-btn-main">
|
|
|
+
|
|
|
+ <div class="my-btn-main">
|
|
|
<!-- <van-button
|
|
|
class="my-button"
|
|
|
block
|
|
|
@@ -79,7 +82,6 @@
|
|
|
<div class="footer">
|
|
|
<img src="@/assets/images/my/footer.png" />
|
|
|
</div>
|
|
|
- <div style="height: 50px"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -88,7 +90,6 @@
|
|
|
<script>
|
|
|
import asyncRequest from "@/apis/my/index";
|
|
|
import resToken from "@/mixins/resToken";
|
|
|
-import { Dialog } from "vant";
|
|
|
export default {
|
|
|
mixins: [resToken],
|
|
|
data() {
|
|
|
@@ -219,100 +220,7 @@ export default {
|
|
|
width: 100%;
|
|
|
background: #e6e6dc;
|
|
|
|
|
|
- .mine-resume-main {
|
|
|
- // background:linear-gradient(0deg, rgba(255,255,255,.1) 0%, #fff 80%);;
|
|
|
- // background-color: #fff;
|
|
|
- padding: 20px;
|
|
|
- ul {
|
|
|
- background: transparent;
|
|
|
- li {
|
|
|
- &:first-child {
|
|
|
- width: calc(100% - 60px);
|
|
|
- p {
|
|
|
- width: 188px;
|
|
|
- padding: 0 16px 0 0;
|
|
|
- margin: 0;
|
|
|
- color: #daad70;
|
|
|
-
|
|
|
- // color: #1a1a1a;
|
|
|
- font-size: 12px;
|
|
|
- line-height: 16px;
|
|
|
- color: #999999;
|
|
|
- &.title {
|
|
|
- color: #daad70;
|
|
|
-
|
|
|
- // color: #1a1a1a;
|
|
|
- font-weight: bolder;
|
|
|
- font-size: 16px;
|
|
|
- height: 100px;
|
|
|
- line-height: 21px;
|
|
|
- padding: 0 16px 0 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- &:last-child {
|
|
|
- // width: 60px;
|
|
|
- text-align: center;
|
|
|
- margin: 0 0 0 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .headerBox {
|
|
|
- margin: 0 auto;
|
|
|
- }
|
|
|
- .headerImg {
|
|
|
- width: 47.5px;
|
|
|
- height: 47.5px;
|
|
|
- border-radius: 50%;
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- .header-info {
|
|
|
- width: 86px;
|
|
|
- height: 29.5px;
|
|
|
- float: left;
|
|
|
- margin: -43px 0 0 60px;
|
|
|
- // position: absolute;
|
|
|
- // left: 55px;
|
|
|
- // top: 7px;
|
|
|
- p {
|
|
|
- margin: 0;
|
|
|
- // width: 74px;
|
|
|
- height: 15px;
|
|
|
- font-size: 15px;
|
|
|
- font-family: Source Han Sans CN;
|
|
|
- font-weight: 500;
|
|
|
- color: #5c3501;
|
|
|
- line-height: 15px;
|
|
|
- opacity: 0.8;
|
|
|
- }
|
|
|
- span {
|
|
|
- color: #5c3501;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .headerDesc {
|
|
|
- display: flex;
|
|
|
- height: 19px;
|
|
|
- width: 100%;
|
|
|
- justify-content: space-between;
|
|
|
- margin-top: 80px;
|
|
|
- .usable {
|
|
|
- font-size: 0.5rem;
|
|
|
- font-family: Source Han Sans CN;
|
|
|
- font-weight: 400;
|
|
|
- color: #5c3501;
|
|
|
- }
|
|
|
- .header-username {
|
|
|
- margin: 0 0px 0 10px;
|
|
|
- font-size: 0.5rem;
|
|
|
- font-family: Source Han Sans CN;
|
|
|
- font-weight: 500;
|
|
|
- color: #5c3501;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
/**vip开通框 */
|
|
|
.vip-box {
|
|
|
width: 100%;
|
|
|
@@ -348,7 +256,7 @@ export default {
|
|
|
width: 90%;
|
|
|
margin: 40px auto;
|
|
|
box-sizing: border-box;
|
|
|
- padding-bottom: 60px;
|
|
|
+ padding-bottom: 60px;
|
|
|
.footer {
|
|
|
img {
|
|
|
width: 100%;
|
|
|
@@ -357,18 +265,18 @@ export default {
|
|
|
}
|
|
|
// <!-- 我的页面下待收，待发、售后盒子 -->
|
|
|
.top {
|
|
|
- width: 90%;
|
|
|
- margin:auto;
|
|
|
+ width: 100%;
|
|
|
box-sizing: border-box;
|
|
|
background: #e6e6dc;
|
|
|
- margin-top: 90px;
|
|
|
+ margin: -110px 0 0 0;
|
|
|
+ padding: 0 16px;
|
|
|
// height:140px;
|
|
|
p {
|
|
|
font-size: 16px;
|
|
|
- font-family: Source Han Sans CN;
|
|
|
font-weight: 400;
|
|
|
color: #242424;
|
|
|
- margin:10px 0;
|
|
|
+ font-weight: bolder;
|
|
|
+ margin: 10px 0;
|
|
|
}
|
|
|
.vip-box {
|
|
|
height: 70px;
|
|
|
@@ -397,19 +305,18 @@ export default {
|
|
|
// width: 331px;
|
|
|
background: #fcfcf0;
|
|
|
border-radius: 16px;
|
|
|
- padding: 10px 20px;
|
|
|
+ padding: 16px 6px 10px 6px;
|
|
|
display: flex;
|
|
|
margin: 0 0 0 0px;
|
|
|
.cell-my-img {
|
|
|
display: block;
|
|
|
- width: 45px;
|
|
|
- height: 45px;
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
}
|
|
|
.vip-title {
|
|
|
display: inline-block;
|
|
|
height: 10px;
|
|
|
line-height: 20px;
|
|
|
- font-family: Source Han Sans CN;
|
|
|
font-weight: 400;
|
|
|
color: #8a8a8a;
|
|
|
}
|
|
|
@@ -427,7 +334,9 @@ export default {
|
|
|
display: inline-block;
|
|
|
}
|
|
|
span {
|
|
|
- height: 16px;
|
|
|
+ height: 20px;
|
|
|
+
|
|
|
+ line-height: 20px;
|
|
|
display: block;
|
|
|
}
|
|
|
}
|
|
|
@@ -436,17 +345,18 @@ export default {
|
|
|
|
|
|
.common {
|
|
|
font-size: 16px;
|
|
|
- font-family: Source Han Sans CN;
|
|
|
font-weight: 400;
|
|
|
+ font-weight: bolder;
|
|
|
color: #242424;
|
|
|
- margin:10px 0;
|
|
|
+ margin: 10px 0;
|
|
|
}
|
|
|
|
|
|
.bottom {
|
|
|
- width: 90%;
|
|
|
+ width: 100%;
|
|
|
box-sizing: border-box;
|
|
|
background: #e6e6dc;
|
|
|
- margin:20px auto;
|
|
|
+ padding:0 16px;
|
|
|
+ margin: 12px auto;
|
|
|
|
|
|
/**地址栏收获样式 */
|
|
|
.cell-list {
|
|
|
@@ -455,7 +365,7 @@ export default {
|
|
|
display: -webkit-box;
|
|
|
display: -ms-flexbox;
|
|
|
display: flex;
|
|
|
- padding: 20px;
|
|
|
+ padding: 15px 4px;
|
|
|
.van-cell__title {
|
|
|
width: 200px;
|
|
|
position: relative;
|
|
|
@@ -473,60 +383,116 @@ export default {
|
|
|
margin: 0 auto;
|
|
|
text-align: center;
|
|
|
.cell-my-img {
|
|
|
- height: 25px;
|
|
|
+ height: 28px;
|
|
|
|
|
|
width: 100%;
|
|
|
overflow: hidden;
|
|
|
img {
|
|
|
display: inline-block;
|
|
|
- height: 25px;
|
|
|
- width: 25px;
|
|
|
+ height: 28px;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
}
|
|
|
.custom-title {
|
|
|
- margin-top: 8px;
|
|
|
+ margin-top: 4px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- //常用功能下的按钮
|
|
|
-
|
|
|
- // 改
|
|
|
.bgImg {
|
|
|
width: 100%;
|
|
|
- height: 246px;
|
|
|
- background: url("../../assets/images/my/personal/bgImg.png") no-repeat center;
|
|
|
- background-size:100% 100%;
|
|
|
position: relative;
|
|
|
+ img {
|
|
|
+ display: inline-block;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
.my-info {
|
|
|
- width: 90%;
|
|
|
- position: absolute;
|
|
|
- left: 5%;
|
|
|
- bottom: -65px;
|
|
|
- margin: auto;
|
|
|
- background: url("../../assets/images/my/personal/my-info.png") no-repeat center;
|
|
|
- background-size:100% 100%;
|
|
|
+ position: relative;
|
|
|
+ top: -110px;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 16px;
|
|
|
+ .my-info-bg {
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .mine-resume-main {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ .headerBox {
|
|
|
+ width: 100%;
|
|
|
+ padding-top: 16px;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .headerImg {
|
|
|
+ float: left;
|
|
|
+ width: calc(100% - 32px);
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 0 0 16px;
|
|
|
+ img {
|
|
|
+ float: left;
|
|
|
+ width: 40px;
|
|
|
+ }
|
|
|
+ div.header-info {
|
|
|
+ height: 50px;
|
|
|
+ width: 70%;
|
|
|
+ float: left;
|
|
|
+ p,
|
|
|
+ span {
|
|
|
+ width: 100%;
|
|
|
+ margin: 0 0 0 10px;
|
|
|
+ padding: 0;
|
|
|
+ float: left;
|
|
|
+ display: block;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .headerDesc {
|
|
|
+ position: relative;
|
|
|
+ padding: 65px 0 0 0;
|
|
|
+ width: calc(100% - 32px);
|
|
|
+ li {
|
|
|
+ float: left;
|
|
|
+ width: 50%;
|
|
|
+ text-align: left;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 0 0 16px;
|
|
|
+ &:last-child {
|
|
|
+ float: right;
|
|
|
+ width: 50%;
|
|
|
+ text-align: right;
|
|
|
+ padding: 0 16px 0 0;
|
|
|
+ }
|
|
|
+ div {
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @media screen and (min-width: 413px) {
|
|
|
+.headerBox{
|
|
|
+ padding-top:35px;
|
|
|
+}
|
|
|
+.headerDesc{
|
|
|
+ padding-top:78px;
|
|
|
+}
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- //@media screen and (min-width: 320px) {
|
|
|
- // .mine-resume .mine-resume-main .headerDesc {
|
|
|
- // margin-top: 27px;
|
|
|
- // }
|
|
|
- //}
|
|
|
- //@media screen and (min-width: 375px) {
|
|
|
- // .mine-resume .mine-resume-main .headerDesc {
|
|
|
- // margin-top: 53px;
|
|
|
- // margin: 53px 0 0 5px;
|
|
|
- // }
|
|
|
- //}
|
|
|
- //@media screen and (min-width: 414px) {
|
|
|
- // .mine-resume .mine-resume-main .headerDesc {
|
|
|
- // margin-top: 53px;
|
|
|
- // margin: 66px 0 0 5px;
|
|
|
- // }
|
|
|
- //}
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
</style>
|
