Skip to content

H
hls-xcmg-vue-app
Commit 484f664f authored by wjc's avatar wjc
Browse files
Options

登录及首页

parent fbd77cd9
Hide whitespace changes
Inline Side-by-side
Showing with 464 additions and 573 deletions
src/assets/login/passwordConfirm.png 100755 → 100644
View replaced file @ fbd77cd9 View file @ 484f664f
src/assets/login/passwordConfirm.png

963 Bytes | W: | H:

src/assets/login/passwordConfirm.png

2.48 KB | W: | H:

src/assets/login/passwordConfirm.png
src/assets/login/passwordConfirm.png
src/assets/login/passwordConfirm.png
src/assets/login/passwordConfirm.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/login/phone.png 100755 → 100644
View replaced file @ fbd77cd9 View file @ 484f664f
src/assets/login/phone.png

985 Bytes | W: | H:

src/assets/login/phone.png

1.89 KB | W: | H:

src/assets/login/phone.png
src/assets/login/phone.png
src/assets/login/phone.png
src/assets/login/phone.png
  • 2-up
  • Swipe
  • Onion skin
src/pages/home/home-page.vue
View file @ 484f664f
...@@ -7,16 +7,17 @@ ...@@ -7,16 +7,17 @@
--> -->
<template> <template>
<h-view id="homePage" class="public-style" title="演示demo"> <h-view id="homePage" class="public-style" title="演示demo">
<h-header :proportion="[7,10,0]" class="bar-custom"> <h-header :proportion="[3,6,1]" :hasBorder="false">
<div slot="left" class="h-header-btn"> <div slot="left" class="h-header-btn">
<!-- <i class="ion-ios-arrow-back" /> --> <h2>煤科广场</h2>
<img class="locations" src="@/assets/homePage/location.png" alt="" @click="location"> </div>
<span class="home-city">{{ city }}</span> <div slot="center" class="search">
<i class="icon ion-ios-search-strong"/>
<input placeholder="请输入搜索关键词">
</div> </div>
<div slot="center" @click="getLocation">演示demo</div>
</h-header> </h-header>
<h-content class="has-footer"> <h-content class="has-footer">
<div class="top-wrap"/> <!-- <div class="top-wrap"/>
<div class="top-wrap-white"/> <div class="top-wrap-white"/>
<swipe :interval="5000" class="hls-swipe"> <swipe :interval="5000" class="hls-swipe">
<swipe-item class="hls-swipe"> <swipe-item class="hls-swipe">
...@@ -28,75 +29,88 @@ ...@@ -28,75 +29,88 @@
<swipe-item class="hls-swipe"> <swipe-item class="hls-swipe">
<img src="@/assets/homePage/banner8.jpg" alt=""> <img src="@/assets/homePage/banner8.jpg" alt="">
</swipe-item> </swipe-item>
</swipe> </swipe>-->
<div class="functions"> <div class="card">
<div class="title">资讯动态</div> <div class="card-body">
<ul> <h4>Hi，今日为你推荐</h4>
<li v-for="item in newsList" :key="item.index"><img src="@/assets/homePage/inform.png" alt="">{{ <div class="time">
item.new_title }} <h2>
</li> {{ new Date().getDate() }}
</ul> </h2>
<img src="@/assets/functionCenter/in@2x.png" @click="gotoNews()"> <div class="line"/>
<!-- <function-item <div class="date">
v-for="item in moduleSeparateList.slice(0,4)" :key="item.moduleId" :functionIcon="item.moduleIcon" <span>{{ getMonth }}</span>
:functionName="item.moduleName" <span>{{ new Date().getFullYear() }}</span>
:data="item" @clickFunction="goModuleFunction"/> --> </div>
</div> </div>
<h2>
学习贯彻习近平新时代中国特色社会主义思想教育主题
</h2>
</div>
<div class="center-pic"> </div>
<div class="left-pic"> <div class="news">
<img src="@/assets/homePage/copy4.png" alt=""> <div class="news-top">
<div class="news-top-title">
集团新闻
</div>
<div class="news-top-more" @click="gotoNews()">
更多 》
</div>
</div> </div>
<div class="right-pic"> <div class="news-items vue-1px-b">
<img src="@/assets/homePage/banner10.jpg" alt=""> <div v-for="(item,index) in newsList" v-if="index<5" :key="item.index" class="news-item">
<img src="@/assets/homePage/banner11.jpg" alt=""> <div class="news-item-num">{{ '0'+Number(index+1) }}</div>
<div class="news-item-title">{{ item.new_title }}</div>
</div>
</div> </div>
</div> </div>
<div class="guessing">猜你喜欢<span><img src="@/assets/homePage/intrest.png"></span></div>
<div v-for="(list,index) in guessingList" :key="index" class="guessing-wrap" @click="goProductDetail(list)"> <div class="news-cards">
<list-item :item-height="120"> <div class="news-card" v-for="item in newCard" key="item.index">
<item> <div class="news-card-left">
<div slot="name" class="item-pic"> <div class="news-card-left-title">
<!-- <img src="@/assets/homePage/WechatIMG2 Copy@2x.png" alt=""> --> <div class="news-card-left-title-tip">{{item.tip}}</div>
<img :src="list.url"> <div class="news-card-left-title-title">{{item.title}}</div>
</div> </div>
<div slot="content" class="item-content"> <div class="news-card-left-content">
<div class="top">{{ list.product_name }}</div> <div class="company">{{item.company}}</div>
<img src="@/assets/homePage/hot.png" class="hot"> <div class="line"></div>
<div class="center"><span class="firsts">{{ !list.office_id&&!list.agent_id?'-':(list.office_id?'办事处':'经销商') }}</span> <div class="company">{{item.time}}</div>
<span class="seconds">{{ !list.office_id&&!list.agent_id?'-':(list.office_id?list.office_name:list.agent_name) }}</span>
</div>
<div class="center"><span class="firsts">产品型号</span> <span class="seconds">{{ list.product_code }}</span>
</div>
<div class="center"><span class="firsts">地址</span> <span class="seconds">{{ !list.office_id&&!list.agent_id?( list.province_id_n === list.city_id_n?(list.district_id_n?list.city_id_n + list.district_id_n:list.city_id_n):(list.district_id_n?list.province_id_n + list.city_id_n + list.district_id_n:list.province_id_n + list.city_id_n )):(list.office_id? (list.office_province === list.office_city?(list.office_district?list.office_city + list.office_district:list.office_city ):(list.office_district?list.office_province + list.office_city + list.office_district:list.office_province + list.office_city)):(list.agent_province === list.agent_city?(list.agent_district?list.agent_city + list.agent_district:list.agent_city):(list.agent_district?list.agent_province + list.agent_city + list.agent_district:list.agent_province + list.agent_city))) }}</span>
</div>
</div> </div>
</item> </div>
</list-item> <div class="news-card-right">
<img :src="item.imgUrl">
</div>
</div>
</div> </div>
<!-- <div class="bank" style="height: 60px;width: 100%"/>-->
</h-content> </h-content>
</h-view> </h-view>
</template> </template>
<script> <script>
import functionState from './functionState'
import noImg from '../../assets/productQuery/none.png'
export default { export default {
name: 'HomePage', name: 'HomePage',
data () { data () {
return { return {
city: '',
province: '',
user_bp_status: '', user_bp_status: '',
user_bp_class: '', user_bp_class: '',
bp_id: '', bp_id: '',
isVisitor: false, isVisitor: false,
moduleSeparateList: [],
guessingList: [],
newsList: [], newsList: [],
newCard: [
{tip: '专题', title: '喜迎二十大·煤科建新功', time: '2023-12-23', company: '中国煤炭科工集团', imgUrl: 'https://manager.ccteg.cn/uploads/images/42bdfb3b46502ccf34990387666b9f55.png'},
{tip: '媒体聚焦', title: '突破世界级难题、创造世界记录', time: '2023-11-02', company: '中国煤炭科工集团', imgUrl: 'https://manager.ccteg.cn/uploads/images/9928278f516b0a82aecd3d7bc72002a4.png'},
{tip: '煤科硬核', title: '喜迎二十大·煤科建新功', time: '2023-12-12', company: '中国煤炭科工集团', imgUrl: 'https://manager.ccteg.cn/uploads/images/214a37b186e9cdf9a66c9a35fcbef2ab.png'}],
} }
}, },
computed: {
getMonth () {
const month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Spt', 'Oct', 'Nov', 'Dec']
return month[new Date().getMonth()].toUpperCase()
},
},
watch: {}, watch: {},
created () { created () {
// this.getLocation() // this.getLocation()
...@@ -104,65 +118,17 @@ export default { ...@@ -104,65 +118,17 @@ export default {
beforeRouteEnter (to, from, next) { beforeRouteEnter (to, from, next) {
next(vm => { next(vm => {
// if (from.name === 'Login') { // if (from.name === 'Login') {
vm.moduleSeparateList = [...functionState.moduleSeparateList]
if (window.localStorage.getItem('user_phone')) { if (window.localStorage.getItem('user_phone')) {
vm.userQuery() vm.userQuery()
} }
// vm.guessingQuery() // 猜你喜欢查询 // vm.guessingQuery() // 猜你喜欢查询
vm.isVisitor = !window.localStorage.getItem('password') vm.isVisitor = !window.localStorage.getItem('password')
// vm.guessingQuery() // 猜你喜欢查询 // vm.guessingQuery() // 猜你喜欢查询
vm.getLocation()
vm.getNews() vm.getNews()
// } // }
}) })
}, },
methods: { methods: {
// 定位
getLocation () {
let vm = this
// if (vum.Platform.isAndroid()) { // 安卓采用jsapi
// var geolocation = new BMap.Geolocation()
// vm.hlsPopup.showLoading('数据加载中')
// geolocation.getCurrentPosition(function (res) {
// vm.hlsPopup.hideLoading()
// if (this.getStatus() === 0) {
// // 判断是否是手动选择过定位
// if (window.localStorage.getItem('province')) {
// vm.city = window.localStorage.getItem('city')
// vm.province = window.localStorage.getItem('province')
// vm.guessingQuery(vm.city)
// } else {
// // 没有就定位当前位置
// console.log(res)
// vm.city = res.address.city
// vm.province = res.address.province
// vm.guessingQuery(res.address.city)
// }
// }
// }, {enableHighAccuracy: true})
// } else { // ios使用插件定位
console.log('&&&&&&&&&&&&___ios')
// if (!$config.isMobilePlatform) {
// }
/*baidumap_location.getCurrentPosition(function (result) {
if (window.localStorage.getItem('province')) {
vm.city = window.localStorage.getItem('city')
vm.province = window.localStorage.getItem('province')
vm.guessingQuery(vm.city)
} else {
vm.city = result.city
vm.province = result.province
vm.guessingQuery(result.city)
}
}, function (error) {
})*/
// setTimeout(vm.guessingQuery(), 0)
},
goFunctionHome (data) {
this.$router.push({
name: data.functionState,
})
},
// 新闻资讯 // 新闻资讯
getNews () { getNews () {
let url = $config.basePath + 'news_entrance_list' let url = $config.basePath + 'news_entrance_list'
...@@ -195,15 +161,6 @@ export default { ...@@ -195,15 +161,6 @@ export default {
}) })
} }
}, },
location () {
this.$router.push({
name: 'Location',
params: {
province: this.province,
city: this.city,
},
})
},
gotoNews () { gotoNews () {
this.$router.push({ this.$router.push({
name: 'NewsList', name: 'NewsList',
...@@ -230,32 +187,11 @@ export default { ...@@ -230,32 +187,11 @@ export default {
// } // }
// }) // })
this.user_bp_status = JSON.parse(window.localStorage.getItem("now_user_bp_bind_id")).bp_status; this.user_bp_status = JSON.parse(window.localStorage.getItem('now_user_bp_bind_id')).bp_status
this.user_bp_class = JSON.parse(window.localStorage.getItem("now_user_bp_bind_id")).bp_class; this.user_bp_class = JSON.parse(window.localStorage.getItem('now_user_bp_bind_id')).bp_class
this.bp_id = JSON.parse(window.localStorage.getItem("now_user_bp_bind_id")).bp_id; this.bp_id = JSON.parse(window.localStorage.getItem('now_user_bp_bind_id')).bp_id
},
// 猜你喜欢
guessingQuery (e) {
console.log(e)
let vm = this
let url = $config.basePath + 'guess_you_like_query'
let param = {
'user_phone': window.localStorage.getItem('user_phone'),
'city': e,
}
vm.hlsPopup.showLoading('数据加载中')
vm.$post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
if (res.result === 'S') {
vm.guessingList = res.lists
vm.guessingList.forEach(item => {
item['url'] = item.product_attachment_id ? process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token : noImg
})
} else {
hlsPopup.showLongCenter(res.message)
}
})
}, },
// 进入产品明细 // 进入产品明细
goProductDetail (list) { goProductDetail (list) {
let vm = this let vm = this
...@@ -288,270 +224,232 @@ export default { ...@@ -288,270 +224,232 @@ export default {
#homePage { #homePage {
.content { .content {
background-color: #EFEFEF; background-image: linear-gradient(180deg, #FFFFFF 0%, #F9F9F9 68%);
} padding: 0 6px;
.top-wrap { .card {
width: 100%; background: url("../../assets/homePage/home-card@2x.png") no-repeat;
height: 100px; background-size: 100% 100%;
background-color: @headerColor; height: 160px;
border-bottom-right-radius: 30%;
border-bottom-left-radius: 30%; &-body {
position: absolute; width: 60%;
top: 0; float: right;
} padding: 20px 10px;
.top-wrap-white { h4 {
width: 100%; font-size: 12px;
height: 100px; color: rgba(255, 255, 255, 0.80);
position: absolute; // text-align: center;
top: 100px; font-weight: 400;
} margin-bottom: 0;
.home-city {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.h-header .h-header-left .h-header-btn:first-of-type {
padding-left: 0.2rem;
}
.functions {
height: 80px;
width: 96%;
margin: 0 auto 10px;
border-radius: 10px;
background: #fff;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
img {
height: 15px;
}
.title {
flex-grow: 0;
flex-basis: 70px;
padding: 0 15px;
color: #1D3FFF;
font-weight: 600;
line-height: 30px;
text-align: center;
border-right: 1px solid #F1F0F5;
}
ul {
flex-grow: 2;
flex-basis: 2;
li {
height: 30px;
line-height: 30px;
vertical-align: middle;
text-align: left;
text-indent: 15px;
font-size: 14px;
img {
vertical-align: middle;
margin-right: 15px;
width: 15px;
} }
}
}
&:before {
content: ''
}
&:after { h2 {
content: '' font-size: 14px;
} color: #FFFFFF;
font-weight: 700;
margin-bottom: 0;
}
.function-item { .time {
height: 100%; color: #FFFFFF;
display: flex; // text-align: center;
flex-direction: column; display: flex;
justify-content: space-around; align-items: center;
align-items: center; height: 30px;
margin: 10px 0 16px 0;
h2 {
font-size: 27px;
font-weight: 700;
color: #FFFFFF;
margin-bottom: 0;
margin-right: 5px;
}
img { .line {
margin: 0; border-left: 1px solid #fff;
} height: 25px
}
div { .date {
margin-bottom: 14px; margin-left: 5px;
ont-family: PingFangSC-Regular; display: flex;
font-size: 13px; flex-direction: column;
color: #3C3D48; font-size: 12px;
letter-spacing: 0; }
}
} }
} }
} }
.h-header .h-header-center div { .h-header .h-header-left .h-header-btn h2 {
text-align: left !important; font-size: 18px;
color: #000000;
text-align: center;
font-weight: 700;
margin-bottom: 0;
} }
.locations { .h-header .h-header-left .h-header-btn:first-of-type {
height: 24px; padding-left: 0.2rem;
width: 24px;
} }
.hls-swipe { .h-header .h-header-center {
width: 100vw; height: 32px;
background: #F0F1F3;
border-radius: 16px;
img { .search {
width: 100vw; width: 100%;
// height: 100%; height: 32px;
} line-height: 32px;
font-size: 14px;
.hls-swipe-indicators { display: flex;
left: 54%; justify-content: space-between;
bottom: 20px; padding: 0 15px;
.hls-swipe-indicators-item { .icon {
width: 10px; font-size: 18px;
height: 2px;
border-radius: 0;
} }
.hls-swipe-indicators-item--active { input {
background-color: #FFF; background-color: transparent;
margin-left: 10px;
width: 100%;
} }
} }
} }
.center-pic { .news {
margin-top: 10px; height: auto;
width: 100%; width: 100%;
display: flex; margin: 0 auto 10px;
flex-direction: row; border-radius: 10px;
padding: 0 1% 0 1%; padding: 10px;
.left-pic {
width: 41.6%;
margin-left: 4px;
img {
width: 100%;
height: 100%;
}
}
.right-pic { &-top {
width: 55.2%; height: 30px;
display: flex; display: flex;
flex-direction: column; align-items: center;
margin-left: 4px; justify-content: space-between;
img { &-title {
max-width: 100%; font-size: 16px;
height: auto; color: #000000;
font-weight: 600;
} }
img:nth-of-type(2) { &-more {
margin-top: 4px; font-size: 12px;
color: #C9CACC;
font-weight: 500;
} }
} }
}
.guessing { &-items {
display: flex; padding-bottom: 10px;
align-items: center;
height: 22px;
font-family: PingFangSC-Semibold;
font-size: 16px;
color: #00469C;
font-weight: 600;
letter-spacing: 0.57px;
height: 40px;
padding-left: 2%;
span {
padding-top: 2px;
margin-left: 4px;
} }
img { &-item {
width: 14px; height: 30px;
height: 14px; line-height: 30px;
} display: flex;
} margin: 10px 0;
width: 100%;
.guessing-wrap {
position: relative;
width: 96%;
margin: 0 auto;
.hls-list-item {
border-radius: 10px;
.contents { &-num {
padding: 8px 6px 8px 0; font-size: 18px;
font-weight: 700;
color: #F6B358;
margin-right: 10px;
}
.add-content { &-title {
justify-content: flex-start; font-size: 14px;
} color: #000000;
letter-spacing: 0.4px;
font-weight: 400;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
} }
}
.item-pic {
width: 110px;
height: 110px;
display: flex;
justify-content: center;
align-items: center;
img {
width: 100%;
// height: 100%;
}
} }
.item-content { .news-cards{
.top { .news-card{
font-family: PingFangSC-Semibold;
font-size: 16px;
color: #3B3B3B;
letter-spacing: 0.54px;
margin-top: 10px;
font-weight: 600;
}
.hot {
position: absolute;
top: 0;
right: 0;
width: 45px;
}
.center {
margin-top: 6px;
display: flex; display: flex;
align-items: center;
.firsts { background: #FFFFFF;
width: 76px; box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.05);
font-family: PingFangSC-Regular; border-radius: 8px;
font-size: 14px; margin-bottom: 12px;
color: rgba(56, 63, 69, 0.60); padding: 12px;
letter-spacing: 0.5px; &-left{
width: 70%;
height: 80px;
display: flex;
flex-direction: column;
justify-content: space-between;
&-title {
display: flex;
height: 20px;
line-height: 20px;
font-size: 14px;
color: #000000;
font-weight: 500;
&-tip{
font-size: 12px;
font-weight: bold;
color: #F6B358;
border: 2px solid #F6B358;
padding: 2px;
border-radius: 4px;
line-height: 14px;
margin-right: 4px;
max-width: 60px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&-title{
width: 70%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
&-content{
display: flex;
font-size: 12px;
align-items: center;
color: #C9CACC;
font-weight: 500;
height: 17px;
.company{
margin-right: 4px;
}
.line{
height: 15px;
border-left: 1px solid #C9CACC;
margin-right: 4px;
}
}
} }
.seconds { &-right{
flex: 1; width: 30%;
text-align: left; img {
font-weight: 600; height: 80px;
font-family: PingFangSC-Semibold; width: 100%;
font-size: 14px; border-radius: 4px;
color: #4B4A4B; }
letter-spacing: 0.5px;
} }
} }
} }
......
src/pages/login.vue
View file @ 484f664f
...@@ -11,9 +11,11 @@ ...@@ -11,9 +11,11 @@
</div> </div>
</div> </div>
</transition> </transition>
<div class="bird-icon" /> <div class="bird-icon">
<h2>Hello!</h2>
<h3>欢迎使用租赁通～</h3>
</div>
<div class="login-wrap"> <div class="login-wrap">
<img class="title" src="../assets/login/right-title.png" >
<div class="pwd"> <div class="pwd">
<div class="pwd-input"> <div class="pwd-input">
<input <input
...@@ -24,7 +26,7 @@ ...@@ -24,7 +26,7 @@
<img src="../assets/login/login-delete.png" > <img src="../assets/login/login-delete.png" >
</div> </div>
</div> </div>
<div class="pwd"> <div class="pwd" style="margin-top: 15px">
<div class="pwd-input"> <div class="pwd-input">
<input <input
id="passwordInput" v-model="password" :type="pwdType" placeholder="请输入密码" id="passwordInput" v-model="password" :type="pwdType" placeholder="请输入密码"
...@@ -38,11 +40,9 @@ ...@@ -38,11 +40,9 @@
<div class="register" @click="registerNew">注册</div> <div class="register" @click="registerNew">注册</div>
<div class="pwd-forgotten" @click="pwdForgotten">忘记密码？</div> <div class="pwd-forgotten" @click="pwdForgotten">忘记密码？</div>
</div> </div>
<div class="both-button"> </div>
<div class="button submit" @click="access">登录</div> <div class="login-btn">
<div class="button submit" @click="goHome">游客体验</div> <div class="button submit" @click="access">登录</div>
</div>
</div> </div>
</scroll> </scroll>
</template> </template>
...@@ -104,10 +104,10 @@ export default { ...@@ -104,10 +104,10 @@ export default {
methods: { methods: {
async goHome () { async goHome () {
hlsPopup.showLongCenter('游客体验暂不可用！') hlsPopup.showLongCenter('游客体验暂不可用！')
/*let flag = await this.getAccessToken() /* let flag = await this.getAccessToken()
if (flag) { if (flag) {
this.$router.push('tab') this.$router.push('tab')
}*/ } */
}, },
changeType () { changeType () {
this.pwdType = this.pwdType === 'password' ? 'text' : 'password' this.pwdType = this.pwdType === 'password' ? 'text' : 'password'
...@@ -143,12 +143,12 @@ export default { ...@@ -143,12 +143,12 @@ export default {
window.localStorage.setItem('user_phone', vm.username) window.localStorage.setItem('user_phone', vm.username)
window.localStorage.setItem('app_user_id', res.info.app_user_id) window.localStorage.setItem('app_user_id', res.info.app_user_id)
// vm.$router.push('tab') // vm.$router.push('tab')
vm.$router.push('/choose-user'); vm.$router.push('/choose-user')
let tagOption = { let tagOption = {
'username': isNaN(Number(vm.username)) ? '11111111111': vm.username 'username': isNaN(Number(vm.username)) ? '11111111111' : vm.username,
} }
let phone = isNaN(Number(vm.username)) ? '11111111111': vm.username; let phone = isNaN(Number(vm.username)) ? '11111111111' : vm.username
vm.Jpush._jpush_config(tagOption, phone); vm.Jpush._jpush_config(tagOption, phone)
} else { } else {
hlsPopup.hideLoading() hlsPopup.hideLoading()
hlsPopup.showLongCenter(res.message) hlsPopup.showLongCenter(res.message)
...@@ -313,7 +313,7 @@ export default { ...@@ -313,7 +313,7 @@ export default {
opacity: 0; opacity: 0;
} }
#login { #login {
background: url("../assets/login/background.png") no-repeat; background: url("../assets/login/background@3x.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
background-position-x: 0px; background-position-x: 0px;
color: #ffffff; color: #ffffff;
...@@ -386,23 +386,28 @@ export default { ...@@ -386,23 +386,28 @@ export default {
} }
} }
.bird-icon { .bird-icon {
padding-top: 30%; padding-top: 35%;
background-size: 51px 25px; h2,h3{
font-family: AlibabaPuHuiTi_2_85_Bold;
font-size: 27px;
color: #007BC7;
font-weight: 700;
margin-left: 10%;
}
h3{
font-size: 20px;
margin-top: 5px;
}
} }
.login-wrap { .login-wrap {
width: 87%; width: 87%;
height: 355px; height: auto;
margin: 0 auto; margin: 0 auto;
background-color: #fff; background-color: #fff;
border-radius: 8px; margin-top: 18%;
// margin-top: 15%; padding: 0 24px 20px 24px;
margin-top: 6%; box-shadow: 0px 3px 20px 0px rgba(0,123,199,0.2);
padding: 32px 24px; border-radius: 10px;
.title {
width: 227px;
height: 71px;
margin-left: -10px;
}
} }
.pwd { .pwd {
position: relative; position: relative;
...@@ -410,6 +415,7 @@ export default { ...@@ -410,6 +415,7 @@ export default {
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
display: -webkit-flex; display: -webkit-flex;
.pwd-icon { .pwd-icon {
margin-top: 2px; margin-top: 2px;
margin-right: 6px; margin-right: 6px;
...@@ -439,7 +445,7 @@ export default { ...@@ -439,7 +445,7 @@ export default {
line-height: 35px; line-height: 35px;
display: flex; display: flex;
align-items: center; align-items: center;
border-bottom: 1px solid rgba(42, 42, 42, 0.4); border-bottom: 1px solid rgba(226,226,226,1);
margin-top: 30px; margin-top: 30px;
border-top:1px solid #FFF; border-top:1px solid #FFF;
border-left: 1px solid #FFF; border-left: 1px solid #FFF;
...@@ -472,21 +478,21 @@ export default { ...@@ -472,21 +478,21 @@ export default {
display: flex; display: flex;
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 13px; font-size: 13px;
color: #1d3fff; color: #007BC7;
margin-top: 8px; margin-top: 15px;
font-weight: 500; font-weight: 500;
display: -webkit-flex; display: -webkit-flex;
justify-content: space-between; justify-content: space-between;
-webkit-justify-content: space-between; -webkit-justify-content: space-between;
} }
.both-button{ .login-btn {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
} }
.submit { .submit {
background: #1d3fff; background: #007BC7;
border-radius: 4px; border-radius: 50px;
width: 130px; width: 70%;
margin-top: 32px; margin-top: 32px;
height: 45px; height: 45px;
font-size: 16px; font-size: 16px;
......
src/pages/pwd-forgotten.vue
View file @ 484f664f
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
<input slot="content" v-model="phone_number" placeholder="请输入手机号码"> <input slot="content" v-model="phone_number" placeholder="请输入手机号码">
</item> </item>
<item> <item>
<img slot="left-icon" src="../assets/login/phone_code.png" class="left-icon"> <img slot="left-icon" src="../assets/login/check@3x.png" class="left-icon">
<div slot="name" class="required">验证码</div> <div slot="name" class="required">验证码</div>
<input slot="content" v-model="verifiedCode" type="text" placeholder="请填写验证码"> <input slot="content" v-model="verifiedCode" type="text" placeholder="请填写验证码">
<div slot="right-icon" class="verified-code"> <div slot="right-icon" class="verified-code">
......
src/pages/regiester2.vue
View file @ 484f664f
...@@ -5,11 +5,13 @@ ...@@ -5,11 +5,13 @@
<img src="@/assets/login/return.png" @click="returnLogin"> <img src="@/assets/login/return.png" @click="returnLogin">
</div> </div>
<div class="box"> <div class="box">
<div class="box-content"> <div class="welcome">
<img class="register-title" src="../assets/login/right-title.png" > <h2>欢迎注册！</h2>
</div>
<div class="register-content">
<div class="reg-item"> <div class="reg-item">
<img src="../assets/login/reg-user.png" class="left-icon" > <img src="../assets/login/phone.png" class="left-icon">
<input v-model="phone_number" placeholder="请输入手机号码" > <input v-model="phone_number" placeholder="请输入手机号码">
<img <img
v-if="phone_number" v-if="phone_number"
class="right-icon" class="right-icon"
...@@ -18,15 +20,15 @@ ...@@ -18,15 +20,15 @@
> >
</div> </div>
<div class="reg-item"> <div class="reg-item">
<img src="../assets/login/check.png" class="left-icon" > <img src="../assets/login/check@3x.png" class="left-icon">
<input v-model="verifiedCode" type="text" placeholder="请填写验证码" > <input v-model="verifiedCode" type="text" placeholder="请填写验证码">
<div class="verified-code"> <div class="verified-code">
<div v-if="!showTimer" class="verified-code-box" @click="getPhoneCode">点击获取</div> <div v-if="!showTimer" class="verified-code-box" @click="getPhoneCode">获取验证码</div>
<span v-if="showTimer" class="verified-code-des">{{ timerCount }}{{ text }}</span> <span v-if="showTimer" class="verified-code-des">{{ timerCount }}{{ text }}</span>
</div> </div>
</div> </div>
<div class="reg-item"> <div class="reg-item">
<img src="../assets/login/pass.png" class="left-icon" > <img src="@/assets/login/passwordConfirm.png" class="left-icon">
<input <input
v-model="user_password" v-model="user_password"
:type="pwdType" :type="pwdType"
...@@ -35,15 +37,19 @@ ...@@ -35,15 +37,19 @@
oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')" oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')"
> >
<img v-if="user_password" :src="openEye" class="right-icon" @click="changeType" > <img v-if="user_password" :src="openEye" class="right-icon" @click="changeType">
</div> </div>
<div class="reg-item"> <div class="reg-item">
<img src="../assets/login/pass.png" class="left-icon" > <img src="../assets/login/passwordConfirm.png" class="left-icon">
<input <input
v-model="confirm" :type="pwdType" oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')" placeholder="请重新输入密码" v-model="confirm" :type="pwdType" oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')"
placeholder="请重新输入密码"
> >
<img v-if="confirm" :src="openEye" class="right-icon" @click="changeType" > <img v-if="confirm" :src="openEye" class="right-icon" @click="changeType">
</div> </div>
</div>
<div class="register-btn">
<div class="button submit" @click="submit">注册</div> <div class="button submit" @click="submit">注册</div>
</div> </div>
</div> </div>
...@@ -117,27 +123,26 @@ export default { ...@@ -117,27 +123,26 @@ export default {
changeType () { changeType () {
this.pwdType = this.pwdType === 'password' ? 'text' : 'password' this.pwdType = this.pwdType === 'password' ? 'text' : 'password'
this.openEye = this.openEye =
this.pwdType === 'password' this.pwdType === 'password'
? require('@/assets/login/passNoShow.png') ? require('@/assets/login/passNoShow.png')
: require('@/assets/login/passShow.png') : require('@/assets/login/passShow.png')
}, },
checkPhone () { checkPhone () {
let vm = this let vm = this
vm.phoneNumberFlag = false vm.phoneNumberFlag = false
if ( if (
hlsUtil.phoneNumber(vm.phone_number) || hlsUtil.phoneNumber(vm.phone_number) ||
hlsUtil.phoneNumber86(vm.phone_number) hlsUtil.phoneNumber86(vm.phone_number)
) { ) {
vm.phoneNumberFlag = true vm.phoneNumberFlag = true
} }
}, },
getPhoneCode () { getPhoneCode () {
let vm = this let vm = this
debugger
if (!vm.showTimer) { if (!vm.showTimer) {
if ( if (
hlsUtil.phoneNumber(vm.phone_number) || hlsUtil.phoneNumber(vm.phone_number) ||
hlsUtil.phoneNumber86(vm.phone_number) hlsUtil.phoneNumber86(vm.phone_number)
) { ) {
vm.phoneNumberFlag = true vm.phoneNumberFlag = true
vm.getVerifiedCode() vm.getVerifiedCode()
...@@ -251,184 +256,166 @@ export default { ...@@ -251,184 +256,166 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
@import "../styles/mixin"; @import "../styles/mixin";
@import "../styles/vue-1px"; @import "../styles/vue-1px";
#register { #register {
.content { .content {
background: url("../assets/login/background.png"); background: url("../assets/login/register-back@3x.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
.box {
width: 327px; .box {
height: 512px; width: 100%;
margin: 0 auto; height: auto;
margin-top:80px; padding-top: 35%;
background: #1d3fff;
border-radius: 8px; .welcome {
.box-content { //margin-top: 35%;
width: 279px; h2 {
margin: 0 auto; margin-left: 10%;
.register-title { font-family: AlibabaPuHuiTi_2_85_Bold;
width: 156px; font-size: 27px;
} color: @theme-color;;
.reg-item { font-weight: 700;
position: relative;
width: 100%;
height: 40px;
margin-top: 30px;
line-height: 30px;
img {
width: 28px;
height: 28px;
}
.left-icon {
position: absolute;
}
.right-icon {
width: 24px;
height: 24px;
position: absolute;
right: 0px;
top: 5px;
} }
.verified-code { }
position: absolute;
right: 0px; .register-content {
top: 0px; width: 87%;
.verified-code-box { margin: 0 auto;
padding-left: 12px; background: #FFFFFF;
border-left: 1px solid #ffffff; box-shadow: 0px 3px 20px 0px rgba(0,123,199,0.2);
color: #fff; border-radius: 10px;
font-family: PingFangSC-Regular; padding: 20px 24px 30px 24px;
margin-top: 60px;
.reg-item {
position: relative;
width: 100%;
height: 40px;
margin-top: 30px;
line-height: 30px;
&:first-child {
margin-top: 6px;
}
img {
width: 28px;
height: 28px;
}
.left-icon {
position: absolute;
}
.right-icon {
width: 24px;
height: 24px;
position: absolute;
right: 0px;
top: 5px;
}
.verified-code {
position: absolute;
right: 0px;
top: 0px;
.verified-code-box {
padding-left: 12px;
border-left: 1px solid #ffffff;
color: @theme-color;;
font-size: 14px;
line-height: 30px;
}
.verified-code-des {
font-size: 10px;
color: #fff;
}
}
input {
width: 100%;
text-indent: 30px;
padding-bottom: 8px;
font-size: 14px; font-size: 14px;
line-height: 30px; line-height: 30px;
border-bottom: 1px solid rgba(226,226,226,1);
} }
.verified-code-des {
font-size: 10px; input:focus {
color: #fff; border-bottom: 1px solid #1d3fff;
}
input::-webkit-input-placeholder {
font-size: 14px;
color: rgba(75, 74, 75, 0.4);
} }
}
input {
width: 100%;
text-indent: 30px;
background-color: #1d3fff;
font-family: PingFangSC-Regular;
padding-bottom: 8px;
font-size: 14px;
color: #ffffff;
line-height: 30px;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
input::placeholder {
font-family: PingFangSC-Regular;
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
}
input:focus {
border-bottom: 1px solid #fff;
} }
} }
} }
}
.right-logo {
width: 327px;
margin: 0 auto;
margin-top:10%;
img:last-child{
float: right;
width: 50px;
}
img:first-child{
float:left;
width: 20px;
}
// img {
// width: 50px;
// }
}
.register-title { .right-logo {
margin-top: 16%; width: 327px;
// margin-left: 10%; margin: 0 auto;
margin-top: 10%;
img { img:last-child {
width: 180px; float: right;
width: 50px;
}
img:first-child {
float: left;
width: 20px;
}
} }
}
.hls-list-item { .register-btn{
width: 90%; margin-top: 30px;
margin-left: 8%; display: flex;
margin-top: 6%; justify-content: center;
background: #1d3fff; .submit {
} color: #fff;
background: @theme-color;
height: 44px;
border-radius: 50px;
width: 70%;
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
.hls-item .contents { &.activated {
//.setBottomLine(rgba(29,63,255,0.25)) opacity: 0.8;
border-bottom: 1px solid rgba(255, 255, 255, 0.4); -webkit-transform: scale(1, 1);
} transform: scale(1, 1);
}
}
}
.hls-item .contents .add-name .left-icon {
width: 26px;
}
.hls-item .contents .add-content input { .return {
text-align: left; opacity: 1;
background-color: #1d3fff; background: #fff;
font-family: PingFangSC-Regular; border-radius: 8px 0 0 8px;
font-size: 14px; height: 50px;
color: #ffffff; margin: 0 0 6% 12%;
} font-size: 16px;
.hls-item .contents .add-content input::placeholder { color: #000000;
font-family: PingFangSC-Regular; display: flex;
font-size: 14px; display: -webkit-flex;
color: rgba(255, 255, 255, 0.6); justify-content: center;
} -webkit-justify-content: center;
.add-content { align-items: center;
.right-icon { -webkit-align-items: center;
width: 14px;
}
}
.submit { &.activated {
background: #ffffff; opacity: 0.8;
border-radius: 4px; -webkit-transform: scale(1, 1);
color: @headerColor; transform: scale(1, 1);
width: 279px; }
height: 40px;
margin-top: 50px;
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
&.activated {
opacity: 0.8;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
.return {
opacity: 1;
background: #fff;
border-radius: 8px 0 0 8px;
height: 50px;
margin: 0 0 6% 12%;
font-size: 16px;
color: #000000;
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
&.activated {
opacity: 0.8;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
} }
} }
}
</style> </style>
src/styles/variables.less
View file @ 484f664f
...@@ -15,14 +15,14 @@ ...@@ -15,14 +15,14 @@
/** /**
* 颜色 * 颜色
*/ */
@theme-color:#1D3FFF; @theme-color:#007BC7;
@font-color:#666666; @font-color:#666666;
@mainColor: #000; @mainColor: #000;
@baseColor: white; @baseColor: white;
@hintColor:rgb(181,181,181); @hintColor:rgb(181,181,181);
@headerColor: #1D3FFF; @headerColor: #007BC7;
@background-color-gray: #fafafa; @background-color-gray: #fafafa;
@activated-color: #1D3FFF; @activated-color: #0263c7;
@divider-color:#fafafa; @divider-color:#fafafa;
@check-box-bg:#48D2A0; @check-box-bg:#48D2A0;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment