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 @@
-->
<template>
<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">
<!-- <i class="ion-ios-arrow-back" /> -->
<img class="locations" src="@/assets/homePage/location.png" alt="" @click="location">
<span class="home-city">{{ city }}</span>
<h2>煤科广场</h2>
</div>
<div slot="center" class="search">
<i class="icon ion-ios-search-strong"/>
<input placeholder="请输入搜索关键词">
</div>
<div slot="center" @click="getLocation">演示demo</div>
</h-header>
<h-content class="has-footer">
<div class="top-wrap"/>
<!-- <div class="top-wrap"/>
<div class="top-wrap-white"/>
<swipe :interval="5000" class="hls-swipe">
<swipe-item class="hls-swipe">
......@@ -28,75 +29,88 @@
<swipe-item class="hls-swipe">
<img src="@/assets/homePage/banner8.jpg" alt="">
</swipe-item>
</swipe>
<div class="functions">
<div class="title">资讯动态</div>
<ul>
<li v-for="item in newsList" :key="item.index"><img src="@/assets/homePage/inform.png" alt="">{{
item.new_title }}
</li>
</ul>
<img src="@/assets/functionCenter/in@2x.png" @click="gotoNews()">
<!-- <function-item
v-for="item in moduleSeparateList.slice(0,4)" :key="item.moduleId" :functionIcon="item.moduleIcon"
:functionName="item.moduleName"
:data="item" @clickFunction="goModuleFunction"/> -->
</div>
</swipe>-->
<div class="card">
<div class="card-body">
<h4>Hi，今日为你推荐</h4>
<div class="time">
<h2>
{{ new Date().getDate() }}
</h2>
<div class="line"/>
<div class="date">
<span>{{ getMonth }}</span>
<span>{{ new Date().getFullYear() }}</span>
</div>
</div>
<h2>
学习贯彻习近平新时代中国特色社会主义思想教育主题
</h2>
</div>
<div class="center-pic">
<div class="left-pic">
<img src="@/assets/homePage/copy4.png" alt="">
</div>
<div class="news">
<div class="news-top">
<div class="news-top-title">
集团新闻
</div>
<div class="news-top-more" @click="gotoNews()">
更多 》
</div>
</div>
<div class="right-pic">
<img src="@/assets/homePage/banner10.jpg" alt="">
<img src="@/assets/homePage/banner11.jpg" alt="">
<div class="news-items vue-1px-b">
<div v-for="(item,index) in newsList" v-if="index<5" :key="item.index" class="news-item">
<div class="news-item-num">{{ '0'+Number(index+1) }}</div>
<div class="news-item-title">{{ item.new_title }}</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)">
<list-item :item-height="120">
<item>
<div slot="name" class="item-pic">
<!-- <img src="@/assets/homePage/WechatIMG2 Copy@2x.png" alt=""> -->
<img :src="list.url">
<div class="news-cards">
<div class="news-card" v-for="item in newCard" key="item.index">
<div class="news-card-left">
<div class="news-card-left-title">
<div class="news-card-left-title-tip">{{item.tip}}</div>
<div class="news-card-left-title-title">{{item.title}}</div>
</div>
<div slot="content" class="item-content">
<div class="top">{{ list.product_name }}</div>
<img src="@/assets/homePage/hot.png" class="hot">
<div class="center"><span class="firsts">{{ !list.office_id&&!list.agent_id?'-':(list.office_id?'办事处':'经销商') }}</span>
<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 class="news-card-left-content">
<div class="company">{{item.company}}</div>
<div class="line"></div>
<div class="company">{{item.time}}</div>
</div>
</item>
</list-item>
</div>
<div class="news-card-right">
<img :src="item.imgUrl">
</div>
</div>
</div>
<!-- <div class="bank" style="height: 60px;width: 100%"/>-->
</h-content>
</h-view>
</template>
<script>
import functionState from './functionState'
import noImg from '../../assets/productQuery/none.png'
export default {
name: 'HomePage',
data () {
return {
city: '',
province: '',
user_bp_status: '',
user_bp_class: '',
bp_id: '',
isVisitor: false,
moduleSeparateList: [],
guessingList: [],
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: {},
created () {
// this.getLocation()
......@@ -104,65 +118,17 @@ export default {
beforeRouteEnter (to, from, next) {
next(vm => {
// if (from.name === 'Login') {
vm.moduleSeparateList = [...functionState.moduleSeparateList]
if (window.localStorage.getItem('user_phone')) {
vm.userQuery()
}
// vm.guessingQuery() // 猜你喜欢查询
vm.isVisitor = !window.localStorage.getItem('password')
// vm.guessingQuery() // 猜你喜欢查询
vm.getLocation()
vm.getNews()
// }
})
},
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 () {
let url = $config.basePath + 'news_entrance_list'
......@@ -195,15 +161,6 @@ export default {
})
}
},
location () {
this.$router.push({
name: 'Location',
params: {
province: this.province,
city: this.city,
},
})
},
gotoNews () {
this.$router.push({
name: 'NewsList',
......@@ -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_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;
},
// 猜你喜欢
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)
}
})
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.bp_id = JSON.parse(window.localStorage.getItem('now_user_bp_bind_id')).bp_id
},
// 进入产品明细
goProductDetail (list) {
let vm = this
......@@ -288,270 +224,232 @@ export default {
#homePage {
.content {
background-color: #EFEFEF;
}
.top-wrap {
width: 100%;
height: 100px;
background-color: @headerColor;
border-bottom-right-radius: 30%;
border-bottom-left-radius: 30%;
position: absolute;
top: 0;
}
.top-wrap-white {
width: 100%;
height: 100px;
position: absolute;
top: 100px;
}
.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;
background-image: linear-gradient(180deg, #FFFFFF 0%, #F9F9F9 68%);
padding: 0 6px;
.card {
background: url("../../assets/homePage/home-card@2x.png") no-repeat;
background-size: 100% 100%;
height: 160px;
&-body {
width: 60%;
float: right;
padding: 20px 10px;
h4 {
font-size: 12px;
color: rgba(255, 255, 255, 0.80);
// text-align: center;
font-weight: 400;
margin-bottom: 0;
}
}
}
&:before {
content: ''
}
&:after {
content: ''
}
h2 {
font-size: 14px;
color: #FFFFFF;
font-weight: 700;
margin-bottom: 0;
}
.function-item {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
.time {
color: #FFFFFF;
// text-align: center;
display: flex;
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 {
margin: 0;
}
.line {
border-left: 1px solid #fff;
height: 25px
}
div {
margin-bottom: 14px;
ont-family: PingFangSC-Regular;
font-size: 13px;
color: #3C3D48;
letter-spacing: 0;
.date {
margin-left: 5px;
display: flex;
flex-direction: column;
font-size: 12px;
}
}
}
}
}
.h-header .h-header-center div {
text-align: left !important;
.h-header .h-header-left .h-header-btn h2 {
font-size: 18px;
color: #000000;
text-align: center;
font-weight: 700;
margin-bottom: 0;
}
.locations {
height: 24px;
width: 24px;
.h-header .h-header-left .h-header-btn:first-of-type {
padding-left: 0.2rem;
}
.hls-swipe {
width: 100vw;
.h-header .h-header-center {
height: 32px;
background: #F0F1F3;
border-radius: 16px;
img {
width: 100vw;
// height: 100%;
}
.hls-swipe-indicators {
left: 54%;
bottom: 20px;
.search {
width: 100%;
height: 32px;
line-height: 32px;
font-size: 14px;
display: flex;
justify-content: space-between;
padding: 0 15px;
.hls-swipe-indicators-item {
width: 10px;
height: 2px;
border-radius: 0;
.icon {
font-size: 18px;
}
.hls-swipe-indicators-item--active {
background-color: #FFF;
input {
background-color: transparent;
margin-left: 10px;
width: 100%;
}
}
}
.center-pic {
margin-top: 10px;
.news {
height: auto;
width: 100%;
display: flex;
flex-direction: row;
padding: 0 1% 0 1%;
.left-pic {
width: 41.6%;
margin-left: 4px;
img {
width: 100%;
height: 100%;
}
}
margin: 0 auto 10px;
border-radius: 10px;
padding: 10px;
.right-pic {
width: 55.2%;
&-top {
height: 30px;
display: flex;
flex-direction: column;
margin-left: 4px;
align-items: center;
justify-content: space-between;
img {
max-width: 100%;
height: auto;
&-title {
font-size: 16px;
color: #000000;
font-weight: 600;
}
img:nth-of-type(2) {
margin-top: 4px;
&-more {
font-size: 12px;
color: #C9CACC;
font-weight: 500;
}
}
}
.guessing {
display: flex;
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;
&-items {
padding-bottom: 10px;
}
img {
width: 14px;
height: 14px;
}
}
.guessing-wrap {
position: relative;
width: 96%;
margin: 0 auto;
.hls-list-item {
border-radius: 10px;
&-item {
height: 30px;
line-height: 30px;
display: flex;
margin: 10px 0;
width: 100%;
.contents {
padding: 8px 6px 8px 0;
&-num {
font-size: 18px;
font-weight: 700;
color: #F6B358;
margin-right: 10px;
}
.add-content {
justify-content: flex-start;
}
&-title {
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 {
.top {
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;
.news-cards{
.news-card{
display: flex;
.firsts {
width: 76px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: rgba(56, 63, 69, 0.60);
letter-spacing: 0.5px;
align-items: center;
background: #FFFFFF;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.05);
border-radius: 8px;
margin-bottom: 12px;
padding: 12px;
&-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 {
flex: 1;
text-align: left;
font-weight: 600;
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #4B4A4B;
letter-spacing: 0.5px;
&-right{
width: 30%;
img {
height: 80px;
width: 100%;
border-radius: 4px;
}
}
}
}
......
src/pages/login.vue
View file @ 484f664f
......@@ -11,9 +11,11 @@
</div>
</div>
</transition>
<div class="bird-icon" />
<div class="bird-icon">
<h2>Hello!</h2>
<h3>欢迎使用租赁通～</h3>
</div>
<div class="login-wrap">
<img class="title" src="../assets/login/right-title.png" >
<div class="pwd">
<div class="pwd-input">
<input
......@@ -24,7 +26,7 @@
<img src="../assets/login/login-delete.png" >
</div>
</div>
<div class="pwd">
<div class="pwd" style="margin-top: 15px">
<div class="pwd-input">
<input
id="passwordInput" v-model="password" :type="pwdType" placeholder="请输入密码"
......@@ -38,11 +40,9 @@
<div class="register" @click="registerNew">注册</div>
<div class="pwd-forgotten" @click="pwdForgotten">忘记密码？</div>
</div>
<div class="both-button">
<div class="button submit" @click="access">登录</div>
<div class="button submit" @click="goHome">游客体验</div>
</div>
</div>
<div class="login-btn">
<div class="button submit" @click="access">登录</div>
</div>
</scroll>
</template>
......@@ -104,10 +104,10 @@ export default {
methods: {
async goHome () {
hlsPopup.showLongCenter('游客体验暂不可用！')
/*let flag = await this.getAccessToken()
/* let flag = await this.getAccessToken()
if (flag) {
this.$router.push('tab')
}*/
} */
},
changeType () {
this.pwdType = this.pwdType === 'password' ? 'text' : 'password'
......@@ -143,12 +143,12 @@ export default {
window.localStorage.setItem('user_phone', vm.username)
window.localStorage.setItem('app_user_id', res.info.app_user_id)
// vm.$router.push('tab')
vm.$router.push('/choose-user');
vm.$router.push('/choose-user')
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;
vm.Jpush._jpush_config(tagOption, phone);
let phone = isNaN(Number(vm.username)) ? '11111111111' : vm.username
vm.Jpush._jpush_config(tagOption, phone)
} else {
hlsPopup.hideLoading()
hlsPopup.showLongCenter(res.message)
......@@ -313,7 +313,7 @@ export default {
opacity: 0;
}
#login {
background: url("../assets/login/background.png") no-repeat;
background: url("../assets/login/background@3x.png") no-repeat;
background-size: 100% 100%;
background-position-x: 0px;
color: #ffffff;
......@@ -386,23 +386,28 @@ export default {
}
}
.bird-icon {
padding-top: 30%;
background-size: 51px 25px;
padding-top: 35%;
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 {
width: 87%;
height: 355px;
height: auto;
margin: 0 auto;
background-color: #fff;
border-radius: 8px;
// margin-top: 15%;
margin-top: 6%;
padding: 32px 24px;
.title {
width: 227px;
height: 71px;
margin-left: -10px;
}
margin-top: 18%;
padding: 0 24px 20px 24px;
box-shadow: 0px 3px 20px 0px rgba(0,123,199,0.2);
border-radius: 10px;
}
.pwd {
position: relative;
......@@ -410,6 +415,7 @@ export default {
margin: 0 auto;
display: flex;
display: -webkit-flex;
.pwd-icon {
margin-top: 2px;
margin-right: 6px;
......@@ -439,7 +445,7 @@ export default {
line-height: 35px;
display: flex;
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;
border-top:1px solid #FFF;
border-left: 1px solid #FFF;
......@@ -472,21 +478,21 @@ export default {
display: flex;
font-family: PingFangSC-Regular;
font-size: 13px;
color: #1d3fff;
margin-top: 8px;
color: #007BC7;
margin-top: 15px;
font-weight: 500;
display: -webkit-flex;
justify-content: space-between;
-webkit-justify-content: space-between;
}
.both-button{
.login-btn {
display: flex;
justify-content: space-around;
}
.submit {
background: #1d3fff;
border-radius: 4px;
width: 130px;
background: #007BC7;
border-radius: 50px;
width: 70%;
margin-top: 32px;
height: 45px;
font-size: 16px;
......
src/pages/pwd-forgotten.vue
View file @ 484f664f
......@@ -15,7 +15,7 @@
<input slot="content" v-model="phone_number" placeholder="请输入手机号码">
</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>
<input slot="content" v-model="verifiedCode" type="text" placeholder="请填写验证码">
<div slot="right-icon" class="verified-code">
......
src/pages/regiester2.vue
View file @ 484f664f
......@@ -5,11 +5,13 @@
<img src="@/assets/login/return.png" @click="returnLogin">
</div>
<div class="box">
<div class="box-content">
<img class="register-title" src="../assets/login/right-title.png" >
<div class="welcome">
<h2>欢迎注册！</h2>
</div>
<div class="register-content">
<div class="reg-item">
<img src="../assets/login/reg-user.png" class="left-icon" >
<input v-model="phone_number" placeholder="请输入手机号码" >
<img src="../assets/login/phone.png" class="left-icon">
<input v-model="phone_number" placeholder="请输入手机号码">
<img
v-if="phone_number"
class="right-icon"
......@@ -18,15 +20,15 @@
>
</div>
<div class="reg-item">
<img src="../assets/login/check.png" class="left-icon" >
<input v-model="verifiedCode" type="text" placeholder="请填写验证码" >
<img src="../assets/login/check@3x.png" class="left-icon">
<input v-model="verifiedCode" type="text" placeholder="请填写验证码">
<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>
</div>
</div>
<div class="reg-item">
<img src="../assets/login/pass.png" class="left-icon" >
<img src="@/assets/login/passwordConfirm.png" class="left-icon">
<input
v-model="user_password"
:type="pwdType"
......@@ -35,15 +37,19 @@
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 class="reg-item">
<img src="../assets/login/pass.png" class="left-icon" >
<img src="../assets/login/passwordConfirm.png" class="left-icon">
<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 class="register-btn">
<div class="button submit" @click="submit">注册</div>
</div>
</div>
......@@ -117,27 +123,26 @@ export default {
changeType () {
this.pwdType = this.pwdType === 'password' ? 'text' : 'password'
this.openEye =
this.pwdType === 'password'
? require('@/assets/login/passNoShow.png')
: require('@/assets/login/passShow.png')
this.pwdType === 'password'
? require('@/assets/login/passNoShow.png')
: require('@/assets/login/passShow.png')
},
checkPhone () {
let vm = this
vm.phoneNumberFlag = false
if (
hlsUtil.phoneNumber(vm.phone_number) ||
hlsUtil.phoneNumber86(vm.phone_number)
hlsUtil.phoneNumber86(vm.phone_number)
) {
vm.phoneNumberFlag = true
}
},
getPhoneCode () {
let vm = this
debugger
if (!vm.showTimer) {
if (
hlsUtil.phoneNumber(vm.phone_number) ||
hlsUtil.phoneNumber86(vm.phone_number)
hlsUtil.phoneNumber86(vm.phone_number)
) {
vm.phoneNumberFlag = true
vm.getVerifiedCode()
......@@ -251,184 +256,166 @@ export default {
</script>
<style lang="less">
@import "../styles/mixin";
@import "../styles/vue-1px";
@import "../styles/mixin";
@import "../styles/vue-1px";
#register {
.content {
background: url("../assets/login/background.png");
background-size: 100% 100%;
}
.box {
width: 327px;
height: 512px;
margin: 0 auto;
margin-top:80px;
background: #1d3fff;
border-radius: 8px;
.box-content {
width: 279px;
margin: 0 auto;
.register-title {
width: 156px;
}
.reg-item {
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;
#register {
.content {
background: url("../assets/login/register-back@3x.png") no-repeat;
background-size: 100% 100%;
}
.box {
width: 100%;
height: auto;
padding-top: 35%;
.welcome {
//margin-top: 35%;
h2 {
margin-left: 10%;
font-family: AlibabaPuHuiTi_2_85_Bold;
font-size: 27px;
color: @theme-color;;
font-weight: 700;
}
.verified-code {
position: absolute;
right: 0px;
top: 0px;
.verified-code-box {
padding-left: 12px;
border-left: 1px solid #ffffff;
color: #fff;
font-family: PingFangSC-Regular;
}
.register-content {
width: 87%;
margin: 0 auto;
background: #FFFFFF;
box-shadow: 0px 3px 20px 0px rgba(0,123,199,0.2);
border-radius: 10px;
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;
line-height: 30px;
border-bottom: 1px solid rgba(226,226,226,1);
}
.verified-code-des {
font-size: 10px;
color: #fff;
input:focus {
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 {
margin-top: 16%;
// margin-left: 10%;
.right-logo {
width: 327px;
margin: 0 auto;
margin-top: 10%;
img {
width: 180px;
img:last-child {
float: right;
width: 50px;
}
img:first-child {
float: left;
width: 20px;
}
}
}
.hls-list-item {
width: 90%;
margin-left: 8%;
margin-top: 6%;
background: #1d3fff;
}
.register-btn{
margin-top: 30px;
display: flex;
justify-content: center;
.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 {
//.setBottomLine(rgba(29,63,255,0.25))
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
&.activated {
opacity: 0.8;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
}
.hls-item .contents .add-name .left-icon {
width: 26px;
}
.hls-item .contents .add-content input {
text-align: left;
background-color: #1d3fff;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #ffffff;
}
.hls-item .contents .add-content input::placeholder {
font-family: PingFangSC-Regular;
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
}
.add-content {
.right-icon {
width: 14px;
}
}
.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;
.submit {
background: #ffffff;
border-radius: 4px;
color: @headerColor;
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);
&.activated {
opacity: 0.8;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
}
}
</style>
src/styles/variables.less
View file @ 484f664f
......@@ -15,14 +15,14 @@
/**
* 颜色
*/
@theme-color:#1D3FFF;
@theme-color:#007BC7;
@font-color:#666666;
@mainColor: #000;
@baseColor: white;
@hintColor:rgb(181,181,181);
@headerColor: #1D3FFF;
@headerColor: #007BC7;
@background-color-gray: #fafafa;
@activated-color: #1D3FFF;
@activated-color: #0263c7;
@divider-color:#fafafa;
@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