xinyin025/smart-admin
1
0
Fork 0
mirror of https://gitee.com/lab1024/smart-admin.git synced 2025-11-23 02:46:53 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

userlogin / personal/mypersonal.vue / producted albumn updated

Browse Source
This commit is contained in:
Vion
2022-01-12 17:02:35 +08:00
parent abd4ea6a6b
commit e3cd2e58ba
13 changed files with 895 additions and 1331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

602
rc-busness/pages/personal/mypersonal.vue
View File

@@ -1,64 +1,73 @@
<template>
<div>
<Myheader></Myheader>
<div class="rc-header">
<div class="rc-main">
<div class="rc-top"></div>
<div class="rc-layout-container rc-one-column rc-full-width ts-mypersonal">
<div class="rc-column">
<!-- <div class="rc-title">
<img src="../../assets/image/rc-cat.png" alt="" />
<span>{{ userorder }}</span>
</div> -->
<div class="rc-center">
<img :src='userimage' />
</div>
<div class="rc-login">
<div class="rc-unlogin">
<div class="rc-people" @click="opendialog()">
<img src="../../assets/image/rc-people.png" alt="" />
</div>
<div class="rc-userlogin">
<div v-if="!islogin">
<span>{{usertitle}}</span>
<em>{{userorder}}</em>
</div>
<nuxt-link :to="`/userlogin/login/`">
<span v-if="islogin">登录/注册</span>
</nuxt-link>
</div>
</div>
<div class="rc-islogin">
<nuxt-link :to="`/personal/usermember/`">
<span>会员权益</span>
</nuxt-link>
</div>
</div>
<div class="usercord">
<em>当前积分:{{ rcrcord }}</em>
<span @click="userinter">积分明细</span>
</div>
<div class="rc-max-width--xl">
<div class="rc-center">
<img :src='userimage' />
</div>
</div>
<div class="rc-max-width--xl ts-special-padding">
<div class="rc-login">
<div class="rc-unlogin">
<div class="rc-people" @click="opendialog()">
<img src="../../assets/image/rc-people.png" alt="" />
</div>
<div class="rc-userlogin">
<div v-if="!islogin">
<span>{{usertitle}}</span>
<em>{{userorder}}</em>
</div>
<nuxt-link :to="`/userlogin/login/`">
<span v-if="islogin">登录/注册</span>
</nuxt-link>
</div>
</div>
<div class="rc-islogin">
<nuxt-link :to="`/personal/usermember/`" class="ts-right-arr">
<span>会员权益</span>
</nuxt-link>
</div>
</div>
</div>
<div class="online bold"></div>
<div class="rc-max-width--xl ts-special-padding">
<div class="usercord">
<em>当前积分:{{ rcrcord }}</em>
<span class="ts-right-arr" @click="userinter">积分明细</span>
</div>
<div class="rc-cordd">
<span>距离升级还差:{{ rcvalue }} </span>
<div class="block">
<div class="r-block" ref="userblock"></div>
<!-- <el-slider v-model="value" range show-stops :max="10"> </el-slider> -->
</div>
<div class="rc-value">
<span>0</span>
<span>5000</span>
<span>10000</span>
</div>
</div>
<div class="rc-cordd">
<span>距离升级还差:</span> <span class="lackOfPoint">{{ rcvalue }}</span>
<div class="block">
<div class="r-block" ref="userblock"></div>
<!-- <el-slider v-model="value" range show-stops :max="10"> </el-slider> -->
</div>
<div class="rc-value">
<span>0</span>
<span>5000</span>
<span>10000</span>
</div>
</div>
</div>
<div class="online bold"></div>
<div class="rc-max-width--xl ts-special-padding">
<div class="rc-order">
<em>我的订单</em>
<span @click="findall" >查看全部</span>
<span class="ts-right-arr" @click="findall" >查看全部</span>
</div>
<div class="rc-obligation">
<div class="rc-obligation rc-max-width--lg">
<ul>
<li v-for="(item, index) in prefecture" :key="index" @click="obligation(item,index)">
<img :src="item.catimage" alt="" />
@@ -66,9 +75,14 @@
</li>
</ul>
</div>
<div class="rc-usermain">
</div>
<div class="online bold"></div>
<div class="rc-max-width--xl ts-special-padding">
<div class="rc-usermain">
<h2>服务工具</h2>
<div class="rc-buymain">
<div class="rc-buymain rc-max-width--lg ts-special-padding">
<div class="rc-buy" v-for="(item, index) in personallist" :key="index" @click="openaddress(item,index)">
<div class="rc-cord">
<img :src="item.buyimage" alt="" />
@@ -81,6 +95,8 @@
</div>
</div>
</div>
</div>
<div class="online bold"></div>
</div>
</div>
@@ -402,492 +418,6 @@ this.$router.push({
</script>
<style lang="less" scoped>
ul li ol li em strong i {
list-style: none;
font-style: normal;
}
.rc-header {
width: 100%;
}
//手机端
@media screen and (max-width: 768px) {
/deep/.el-dialog {
width: 352px;
height: 500px;
}
.rc-header{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
h3{
color:#333333;
font-size: 26px;
}
.rc-title{
img{
width: 96px;
height: 96px;
}
}
.userer{
img{
width: 210px;
height: 210px;
display: flex;
justify-content: center;
flex-direction: column;
}
}
}
.rc-main {
width: 92%;
margin: 0 auto;
overflow: hidden;
.rc-usermain{
h2{
display: none;
}
}
.rc-center {
width: 100%;
height: 180px;
img {
width: 100%;
height: 100%;
display: block;
}
}
.rc-login {
width: 100%;
height: 112px;
display: flex;
justify-content: space-between;
align-items: center;
.rc-unlogin{
display: flex;
align-items: center;
}
.rc-userlogin{
margin-left: 16px;
span{
font-size: 18px;
color: #333333;
display: block;
}
em{
font-size: 14px;
color:#666666;
font-style: normal;
display: block;
margin-top: 8px;
}
}
.rc-islogin{
span{
color: #E1001A;
font-size: 14px;
display: block;
border-bottom: 1px solid #E1001A;
}
}
.rc-people {
width: 64px;
height: 64px;
display: flex;
align-items: center;
border: 2px solid #d7d7d7;
border-radius: 50%;
img {
width: 48px;
height: 48px;
display: block;
margin: 0 auto;
}
}
}
.usercord{
display: flex;
justify-content: space-between;
height: 32px;
align-items: center;
border-bottom: 1px solid #D8D8D8;
padding-bottom: 17px
;
em{
font-style: normal;
color: #333333;
font-weight: bold;
}
span{
color:#E1001A;
font-size: 14px;
display: block;
border-bottom: 1px solid #E1001A;
}
}
.rc-cordd{
color:#666666;
font-size: 14px;
span{
display: block;
margin-top: 16px;
text-align: left;
}
.block{
height: 8px;
background: #D7D7D7;
margin-top: 16px;
border-radius: 4px;
.r-block{
width: 0%;
height: 100%;
background: #008900;
}
}
.rc-value{
display: flex;
justify-content: space-between;
}
}
.rc-order{
display: flex;
justify-content: space-between;
margin-top: 16px;
border-bottom: 1px solid #D8D8D8;
padding-bottom: 16px;
em{
font-style: normal;
font-size: 14px;
font-weight: bold;
color: #333333;
}
span{
color:#E1001A;
font-size: 14px;
display: block;
border-bottom: 1px solid #E1001A;
}
}
.rc-obligation{
margin-top: 16px;
ul{
display: flex;
justify-content: space-between;
li{
float: left;
}
img{
width: 44px;
height: 44px;
display: block;
}
}
}
.rc-buy{
width: 100%;
height: 64px;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #D8D8D8;
margin-top: 24px;
.rc-cord{
display: flex;
align-items: center;
}
img{
width: 32px;
height: 32px;
display: block;
}
em{
font-style: normal;
font-size: 14px;
color: #333333;
margin-left: 16px;
}
.rc-load{
display: flex;
align-items: center;
font-size: 14px;
color: #666666;
span{
display: block;
margin-right: 8px;
margin-top: -4px;
}
img{
width: 8px;
height: 16px;
display: block;
}
}
}
}
}
//pc端
@media screen and (min-width: 768px) and (max-width: 1920px) {
/deep/.el-dialog {
width: 440px;
height: 652px;
}
.rc-header{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
h3{
color:#333333;
font-size: 26px;
}
.rc-title{
img{
width: 96px;
height: 96px;
}
}
.userer{
img{
width: 210px;
height: 210px;
display: flex;
justify-content: center;
flex-direction: column;
}
}
}
.rc-main {
width: 92%;
margin: 0 auto;
.rc-center {
width: 100%;
height: 180px;
img {
width: 100%;
height: 100%;
display: block;
}
display: none;
}
.rc-login {
width: 100%;
height: 112px;
display: flex;
justify-content: space-between;
align-items: center;
.rc-unlogin{
display: flex;
align-items: center;
}
.rc-userlogin{
margin-left: 16px;
span{
font-size: 18px;
color: #333333;
display: block;
}
em{
font-size: 14px;
color:#666666;
font-style: normal;
display: block;
margin-top: 8px;
}
}
.rc-islogin{
span{
color: #E1001A;
font-size: 18px;
display: block;
}
}
.rc-people {
width: 64px;
height: 64px;
display: flex;
align-items: center;
border: 2px solid #d7d7d7;
border-radius: 50%;
img {
width: 48px;
height: 48px;
display: block;
margin: 0 auto;
}
}
}
.usercord{
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
border-bottom: 1px solid #D7D7D7;
em{
font-style: normal;
color: #333333;
font-weight: bold;
font-size: 18px;
}
span{
color:#E1001A;
font-size: 18px;
display: block;
}
}
.rc-cordd{
color:#333333;
font-size: 18px;
height: 133px;
margin-top: 32px;
color:#666666;
font-size: 14px;
span{
margin-top: 16px;
font-size: 18px;
text-align: left;
display: block;
}
.block{
height: 8px;
background: #D7D7D7;
margin-top: 16px;
border-radius: 4px;
.r-block{
width: 0%;
height: 100%;
background: #008900;
}
}
.rc-value{
display: flex;
justify-content: space-between;
}
}
.rc-order{
display: flex;
justify-content: space-between;
border-bottom: 1px solid #D8D8D8;
padding-bottom: 28px;
margin-top: 20px;
em{
font-style: normal;
font-size: 26px;
color: #333333;
}
span{
color:#E1001A;
font-size: 18px;
display: block;
}
}
.rc-obligation{
margin-top: 16px;
ul{
display: flex;
justify-content: space-between;
width: 80%;
margin: 0 auto;
text-align: center;
li{
float: left;
}
img{
width: 96px;
height: 96px;
display: block;
}
}
span{
font-size: 18px;
}
}
.rc-usermain{
h2{
color: #333333;
font-size: 26px;
font-weight: normal;
display: block;
padding-bottom: 28px;
border-bottom: 1px solid #D8D8D8;
text-align: left;
}
}
.rc-buymain{
display: flex;
justify-content: space-between;
width: 80%;
margin: 0 auto;
}
.rc-buy{
display: flex;
justify-content: space-between;
text-align: center;
margin-top: 24px;
img{
width: 96px;
height: 96px;
display: block;
}
em{
font-style: normal;
font-size: 18px;
color: #333333;
}
.rc-load{
display: flex;
align-items: center;
font-size: 14px;
color: #666666;
span{
display: block;
margin-right: 8px;
margin-top: -4px;
}
img{
width: 8px;
height: 16px;
display: block;
}
display: none;
}
}
}
}
@import url("@/assets/css/global.less");
@import url("@/assets/css/mypersonal.less");
</style>