Skip to content

M
million
Commit 80efe44c authored by 沈良进's avatar 沈良进
Browse files
Options

add .

parent c386dda9
Show whitespace changes
Inline Side-by-side
Showing with 445 additions and 132 deletions
src/assets/img/about/map.png
View replaced file @ c386dda9 View file @ 80efe44c
src/assets/img/about/map.png

1.06 MB | W: | H:

src/assets/img/about/map.png

1.09 MB | W: | H:

src/assets/img/about/map.png
src/assets/img/about/map.png
src/assets/img/about/map.png
src/assets/img/about/map.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/img/about/team-bg.png
View replaced file @ c386dda9 View file @ 80efe44c
src/assets/img/about/team-bg.png

354 KB | W: | H:

src/assets/img/about/team-bg.png

353 KB | W: | H:

src/assets/img/about/team-bg.png
src/assets/img/about/team-bg.png
src/assets/img/about/team-bg.png
src/assets/img/about/team-bg.png
  • 2-up
  • Swipe
  • Onion skin
src/boot/utils.js
View file @ 80efe44c
......@@ -2,7 +2,7 @@ import Vue from 'vue'
import axios from 'axios'
import md5 from 'js-md5'
// import {eventBus} from './eventBus'
import VueCoreVideoPlayer from 'vue-core-video-players'
// import VueCoreVideoPlayer from 'vue-core-video-players'
import 'viewerjs/dist/viewer.css'
import user from './user'
import message from './message'
......@@ -10,7 +10,7 @@ import product from './product'
import VueViewer from 'v-viewer'
// import VueCoreVideoPlayer from 'vue-core-video-player'
Vue.prototype.$EventBus = new Vue()
Vue.use(VueCoreVideoPlayer)
// Vue.use(VueCoreVideoPlayer)
Vue.use(VueViewer)
Vue.prototype.$md5 = md5;
Vue.prototype.$message = message
......
src/css/app.scss
View file @ 80efe44c
......@@ -105,6 +105,9 @@
.f22 {
font-size: 22px;
}
.f25 {
font-size: 25px;
}
.f26 {
font-size: 26px;
}
......
src/pages/About.vue
View file @ 80efe44c
<style lang="scss" scoped>
/deep/.scroll{
/deep/.scroll {
overflow: inherit;
}
}
.banner {
width: 100%;
}
......@@ -18,6 +18,10 @@
height: 30%;
object-fit: cover;
}
.about-img-m {
width: 100%;
object-fit: cover;
}
.tips {
width: 42px;
height: 3px;
......@@ -27,6 +31,11 @@
padding-top: 90px;
background: url("../assets/img/about/team-bg.png") no-repeat;
}
.team-m {
padding-top: 48px;
background: url("../assets/img/about/team-bg-m.png") no-repeat;
background-size: 100% auto;
}
.card {
padding: 25px 30px;
width: 405px;
......@@ -35,18 +44,48 @@
border: 2px solid rgba(255, 255, 255, 0.81);
box-shadow: 0px 13px 29px 0px rgba(39, 77, 192, 0.08);
border-radius: 8px;
border-radius: 8px;
.title {
font-size: 26px;
}
.desc {
font-size: 18px;
}
}
.card-m {
padding: 15px 25px;
background: linear-gradient(-7deg, #fefeff, #f4f6f9);
border: 2px solid rgba(255, 255, 255, 0.81);
box-shadow: 0px 13px 29px 0px rgba(39, 77, 192, 0.08);
border-radius: 8px;
.title {
font-size: 18px;
}
.desc {
font-size: 14px;
}
}
.avotar {
width: 168px;
height: 168px;
border-radius: 50%;
}
.avotar-m {
width: 86px;
height: 86px;
}
.team-ml {
margin-left: 80px;
}
.team-ml-m {
margin-left: 25px;
}
.mt-150 {
margin-top: 150px;
}
.mt-50 {
margin-top: 50px;
}
.mt-100 {
margin-top: 100px;
}
......@@ -69,7 +108,7 @@
border: 2px solid rgba(255, 255, 255, 0.81);
box-shadow: 0px 13px 29px 0px rgba(39, 77, 192, 0.08);
border-radius: 8px;
padding: 16px 35px;
padding: 16px 15px 16px 35px;
.circle {
width: 32px;
height: 32px;
......@@ -95,6 +134,38 @@
border-radius: 50%;
}
}
.product-card-m {
width: 160px;
background: linear-gradient(-7deg, #fefeff, #f4f6f9);
border: 1px solid rgba(255, 255, 255, 0.81);
box-shadow: 0px 13px 29px 0px rgba(39, 77, 192, 0.08);
border-radius: 8px;
padding: 16px;
.circle {
width: 16px;
height: 16px;
background: var(--q-color-primary);
border-radius: 50%;
text-align: center;
color: #fff;
line-height: 16px;
margin-right: 10px;
margin-top: 4px;
}
.tips {
width: 52px;
height: 2px;
background: #000000;
margin: 2px 0;
}
.name-circle {
width: 6px;
height: 6px;
background: #000000;
display: inline-block;
border-radius: 50%;
}
}
.map {
width: 100%;
max-width: 1200px;
......@@ -103,6 +174,7 @@
.prize {
margin-top: 20px;
width: 192px;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
......@@ -110,6 +182,11 @@
.prize-cover {
width: 155px;
height: 201px;
img {
width: 155px;
height: 201px;
object-fit: contain;
}
}
.line {
width: 100%;
......@@ -124,19 +201,57 @@
border-radius: 50%;
}
}
.partners-card {
.prize-m {
margin-top: 20px;
width: 172px;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.prize-cover {
width: 125px;
height: 180px;
img {
width: 125px;
height: 180px;
object-fit: contain;
}
}
.line {
width: 100%;
height: 3px;
background: #efefef;
margin: 44px 0 0 0;
}
.tips {
margin: -6px auto 15px auto;
width: 8px;
height: 8px;
border-radius: 50%;
}
}
.partners-card-pc {
width: 756px;
height: 234px;
margin: 50px auto 100px auto;
padding: 56px;
}
.partners-card {
background: linear-gradient(-7deg, #fefeff, #f4f6f9);
border: 2px solid rgba(255, 255, 255, 0.81);
box-shadow: 0px 13px 29px 0px rgba(39, 77, 192, 0.08);
border-radius: 6px 16px 16px 16px;
margin: 0 auto;
padding: 56px;
padding: 20px;
.partner-img {
width: 197px;
height: 51px;
margin-right: 70px;
display: block;
margin-right: 70px;
}
.partner-img-m {
display: block;
margin-right: 20px;
width: 100px;
}
}
.partners-list {
......@@ -145,20 +260,54 @@ margin-right: 70px;
.partner {
width: 150px;
height: 80px;
object-fit: contain;
margin-right: 20px;
}
.about {
top: -30px;
left: 0;
z-index: -1;
font-size: 70px;
font-family: FZDaHei-B02S;
font-weight: 400;
color: #eeeeee;
}
.about-m {
top: -15px;
left: 0;
z-index: -1;
font-size: 35px;
font-family: FZDaHei-B02S;
font-weight: 400;
color: #eeeeee;
}
.mobile {
::v-deep .q-carousel--arrows-horizontal.q-carousel--with-padding .q-carousel__slide {
padding-left: 0;
}
}
</style>
<template>
<div>
<img class="banner" src="../assets/img/about/banner.png" />
<div class="flex justify-between wrapper mt-150">
<div class="about-content">
<div class="f40 bold wrapper">
<div :class="$q.platform.is.desktop ? '' : 'mobile'">
<img v-if="$q.platform.is.desktop" class="banner" src="../assets/img/about/banner.png" />
<img v-else class="banner" src="../assets/img/about/banner-m.png" />
<div
class=""
:class="
$q.platform.is.desktop ? 'flex justify-between wrapper mt-150' : ''
"
>
<div
class=""
:class="$q.platform.is.desktop ? 'about-content wrapper' : 'q-pa-md'"
>
<div class="relative bold" :class="$q.platform.is.desktop ? 'f40' : 'f25'">
關於我們
<span>ABOUTUS</span>
<span class="absolute" :class="$q.platform.is.desktop ? 'about' : 'about-m'">ABOUTUS</span>
</div>
<div class="f20 bold q-my-md">〝印象之旅”旅遊品牌成立於2009年3月</div>
<div class="bold q-my-md" :class="$q.platform.is.desktop ? 'f20' : 'f14'">〝印象之旅”旅遊品牌成立於2009年3月</div>
<div class="tips"></div>
<div class="f16 lh200 q-my-md">
<div class=" lh200 q-my-md" :class="$q.platform.is.desktop ? 'f16' : 'f12'">
公司原本为一单纯的日本专线供货商公司营运初期为日本出境游，经过几年来的转变<br />
目前已转型为全产品出境旅游专线供货商，主要经营项目为同业出境旅游批发商<br />
2013年以全资并购四川和平国际旅行社( 国际旅游许可证号：
......@@ -166,8 +315,8 @@ margin-right: 70px;
四川和平国际旅行社为四川省出境资质旅行社，是经国家旅游局批准、四川省工商局注册<br />
具独立法人资格并向旅游主管部门缴纳足额质量保证金的旅游企业，也因此公司正式由一个旅游品牌转型为一个有独立资质的旅游公司
</div>
<div class="f20 bold q-mt-xl q-mb-md">經營理念——以同業市場為出發</div>
<div class="f16 lh200">
<div class="bold q-mb-md" :class="$q.platform.is.desktop ? 'f20 q-mt-xl q-mb-md' : 'f14 q-mt-lg'">經營理念——以同業市場為出發</div>
<div class="lh200" :class="$q.platform.is.desktop ? 'f16' : 'f12'">
公司是由一群年轻且对旅游有所执着的【旅游人】所组成的旅行社<br />
我们理念是以客户为出发点，反向操作以尽乎苛求的高质量来满足客户的需求为宗旨<br />
坚持不合理低价来吸引消费者<br />
......@@ -176,48 +325,51 @@ margin-right: 70px;
目前已经是成都旅游界有口碑的一家出境供货商
</div>
</div>
<img class="about-img" src="../assets/img/about/about.png" />
<img v-if="$q.platform.is.desktop"
class="about-img"
src="../assets/img/about/about.png"
/>
</div>
<div class="team flex justify-center mt-150">
<div class="flex justify-center" :class="$q.platform.is.desktop ? 'team mt-150' : 'team-m q-mt-lg'">
<div>
<img style="width: 71px" src="../assets/img/about/team.png" />
<div class="f40 bold white team-ml q-mt-md">经营团队及职责范围</div>
<div class="f20 white team-ml q-mt-lg">公司核心團隊人員</div>
<img :style="$q.platform.is.desktop ? 'width: 71px' : 'width: 35px'" src="../assets/img/about/team.png" />
<div class=" bold white q-mt-md" :class="$q.platform.is.desktop ? 'team-ml f40' : 'f25 team-ml-m'">经营团队及职责范围</div>
<div class=" white" :class="$q.platform.is.desktop ? 'f20 q-mt-lg team-ml' : '14 q-mt-md team-ml-m'">公司核心團隊人員</div>
</div>
<div class="card q-mx-xl">
<div :class="$q.platform.is.desktop ? 'q-mx-xl card' : 'q-ma-md card-m'">
<div class="flex justify-between">
<div class="q-mt-md q-ml-md">
<div class="f26 bold">谢军女士</div>
<div class="f18 text-grey-6">财务总监</div>
<div class="title bold">谢军女士</div>
<div class="desc text-grey-6">财务总监</div>
<div class="tips q-mt-sm"></div>
</div>
<img class="avotar" src="../assets/img/about/cfo.png" />
<img class="avotar" :class="$q.platform.is.desktop ? '' : 'avotar-m'" src="../assets/img/about/cfo.png" />
</div>
<div class="f16 lh200 q-mt-lg">
<div class=" lh200 q-mt-lg" :class="$q.platform.is.desktop ? 'f16' : 'f12'">
四川成都人,旅游资历20年,成都旅游界知名人物,在四川旅游领域当中的传奇人士之一,为四川地区旅游转型最成功的人物,在短暂的5年内成功从4人公司到目前四川和平国旅集团公司,在四川旅游业界传为佳话,目前和平国旅集团也是西南地区日本与巴里岛旅游最大的组团社(数据可查),其他线路亦有不错的表现,并且是各大旅游平台的产品供货商,专注旅游丰富的业界资源与强势的旅游业操作实力可提供本团队强大的市场后盾
</div>
</div>
<div class="card q-mt-xl">
<div class="q-mt-xl" :class="$q.platform.is.desktop ? 'card' : 'q-ma-md card-m'">
<div class="flex justify-between">
<div class="q-mt-md q-ml-md">
<div class="f26 bold">徐稚升先生</div>
<div class="f18 text-grey-6">销售总经理</div>
<div class="title bold">徐稚升先生</div>
<div class="desc text-grey-6">销售总经理</div>
<div class="tips q-mt-sm"></div>
</div>
<img class="avotar" src="../assets/img/about/ceo.png" />
<img class="avotar" :class="$q.platform.is.desktop ? '' : 'avotar-m'" src="../assets/img/about/ceo.png" />
</div>
<div class="f16 lh200 q-mt-lg">
<div class=" lh200 q-mt-lg" :class="$q.platform.is.desktop ? 'f16' : 'f12'">
台湾台北人,旅游资历15年,极力邀请到本团队的台湾人,在台湾受过完整的专业旅游业训练,有着旅游界最缺乏的营销企画优势,对于旅游互联网通路亦有独到见解,并拥有的成功经营经验与优势的组织管理能力,在四川地区成功引进台湾先进的旅游理念,首创旅行社成立科技公司,大力推动互联网结合旅游概念(ERP系统),从早期B2B概念的推展模式,到现在的B2B2C+O2O的概念,到现在的N+1模式，完全是以不同业界的传统模式推展,
</div>
</div>
</div>
<div class="mt-150 wrapper">
<div class="text-center f40 bold">經營項目</div>
<div class="" :class="$q.platform.is.desktop ? 'wrapper mt-150' : 'q-pa-md mt-50'">
<div class="text-center bold" :class="$q.platform.is.desktop ? 'f40' : 'f25'">經營項目</div>
<div class="line-1"></div>
<div class="line-2"></div>
<div class="text-center f20 lh150 q-mt-lg">
<div class="text-center lh150 q-mt-lg" :class="$q.platform.is.desktop ? 'f20' : 'f12'">
印象之旅专注出境旅游产品的供货商<br />目前主要业务范畴定位同业销售为主(B2B)，目前为西南地区最大日本专线供应商
</div>
<q-carousel
......@@ -234,20 +386,42 @@ margin-right: 70px;
flat
class="bg-transparent rounded-borders q-mt-md"
>
<q-carousel-slide :name="index" v-for="(item, index) in Math.ceil(partnersList.length/topPageCount)" :key="index" class="column no-wrap">
<div class="row fit justify-start items-center q-gutter-md q-col-gutter no-wrap">
<template v-for="(x,i) in topPageCount">
<div :key="i" v-if="(i+(index*topPageCount))<partnersList.length" :product="partnersList[i+(index*topPageCount)]">
<div class="product-card flex">
<div class="circle">A</div>
<q-carousel-slide
:name="index"
v-for="(item, index) in Math.ceil(lineList.length / lineListCount)"
:key="index"
class="column no-wrap"
>
<div
class="row fit justify-start items-center q-gutter-md q-col-gutter no-wrap"
>
<template v-for="(x, i) in lineListCount">
<div
:key="i"
v-if="i + index * lineListCount < lineList.length"
:product="lineList[i + index * lineListCount]"
>
<div v-if="$q.platform.is.desktop" class="product-card flex">
<div class="circle">{{lineList[i + index * lineListCount]['tag']}}</div>
<div>
<div class="f20 bold">東北亞線</div>
<div class="f20 bold">{{lineList[i + index * lineListCount]['label']}}</div>
<div class="tips"></div>
<div class="f16 flex items-center">
<span class="name-circle"></span>日本
<div class="flex">
<div class="f16 flex items-center q-mr-md" v-for="item in lineList[i + index * lineListCount]['city']" :key="item">
<span class="name-circle q-mr-sm"></span>{{item}}
</div></div>
</div>
</div>
<div v-else class="product-card-m flex">
<div class="circle">{{lineList[i + index * lineListCount]['tag']}}</div>
<div>
<div class="f14 bold">{{lineList[i + index * lineListCount]['label']}}</div>
<div class="tips"></div>
<div>
<div class="f12 flex items-center q-mr-md" v-for="item in lineList[i + index * lineListCount]['city']" :key="item">
<span class="name-circle q-mr-sm"></span>{{item}}
</div></div>
</div>
</div>
</div>
</template>
......@@ -257,48 +431,87 @@ margin-right: 70px;
<img class="map q-mt-lg" src="../assets/img/about/map.png" />
</div>
<div class="mt-150 relative" style="z-index: 1">
<div class="text-center f40 bold">公司組織架構</div>
<div class=" relative" style="z-index: 1" :class="$q.platform.is.desktop ? 'mt-150' : 'mt-50'">
<div class="text-center bold" :class="$q.platform.is.desktop ? 'f40' : 'f25'">公司組織架構</div>
<div class="line-1"></div>
<div class="line-2"></div>
</div>
<img
<img v-if="$q.platform.is.desktop"
class="full-width"
style="margin-top: -10%"
src="../assets/img/about/partners.png"
/>
<div class="mt-150 wrapper">
<div class="text-center f40 bold">歷年榮譽</div>
<img v-else
class="full-width q-mt-md"
src="../assets/img/about/partners-m.png"
/>
<div :class="$q.platform.is.desktop ? 'wrapper mt-150' : 'q-pa-md'">
<div class="text-center bold" :class="$q.platform.is.desktop ? 'f40' : 'f25'">歷年榮譽</div>
<div class="line-1"></div>
<div class="line-2"></div>
<div class="flex mt-100">
<div class="prize" v-for="item in prizesList" :key="item.key">
<img
class="prize-cover"
:src="require(`../assets/img/about/${item.img}.png`)"
/>
<q-carousel
v-model="prize"
transition-prev="slide-right"
transition-next="slide-left"
swipeable
animated
control-color="dark"
control-type="regular"
padding
arrows
flat
class="bg-transparent rounded-borders " :class="$q.platform.is.desktop ? 'mt-100' : 'q-mt-md'"
>
<q-carousel-slide
:name="index"
v-for="(item, index) in Math.ceil(prizesList.length / prizesCount)"
:key="index"
class="column no-wrap"
>
<div
class="row fit justify-start items-center q-col-gutter no-wrap"
>
<template v-for="(x, i) in prizesCount">
<div :class="$q.platform.is.desktop ? 'prize' : 'prize-m'"
:key="i"
v-if="i + index * prizesCount < prizesList.length"
:product="prizesList[i + index * prizesCount]"
><div
class="prize-cover"><img
:src="require(`../assets/img/about/${prizesList[i + index * prizesCount].img}.png`)"
/></div>
<div class="line"></div>
<div class="tips bg-primary"></div>
<div class="primary f20 bold text-center">{{ item.time }}</div>
<div class="f16 text-center q-mt-sm">{{ item.prize }}</div>
<div class="f16 text-center">{{ item.desc }}</div>
<div class="primary bold text-center" :class="$q.platform.is.desktop ? 'f20' : 'f14'">{{ prizesList[i + index * prizesCount].time }}</div>
<div class=" text-center q-mt-sm" :class="$q.platform.is.desktop ? 'f16' : 'f12'">{{ prizesList[i + index * prizesCount].prize }}</div>
<div class=" text-center" :class="$q.platform.is.desktop ? 'f16' : 'f12'">{{ prizesList[i + index * prizesCount].desc }}</div>
</div>
</template>
</div>
</q-carousel-slide>
</q-carousel>
</div>
<div class="mt-150">
<div class="text-center f40 bold">合作的夥伴</div>
<div class="" :class="$q.platform.is.desktop ? 'wrapper mt-150' : 'q-pa-md mt-50'">
<div class="text-center bold" :class="$q.platform.is.desktop ? 'f40' : 'f25'">合作的夥伴</div>
<div class="line-1"></div>
<div class="line-2"></div>
<div style="margin-top: 50px; margin-bottom: 100px" class="partners-card flex no-wrap justify-between items-center">
<img class="partner-img" src="../assets/img/about/partners.png"/>
<div
class="partners-card no-wrap flex justify-between items-center" :class="$q.platform.is.desktop ? 'partners-card-pc' : 'q-ma-md'"
>
<img class="" :class="$q.platform.is.desktop ? 'partner-img' : 'partner-img-m'" :src="require(`../assets/img/about/${airlineSelect}.png`)" />
<div>
<div class="f20 bold">全日空航空</div>
<div class="f16 lh200">全日本空输(ANA)是一家日本的航空公司。 也是亚洲最大的航空公司之一，被评之为五星航空 为我社日本系列团主要配搭航空之一。</div>
<div class=" bold" :class="$q.platform.is.desktop ? 'f20' : 'f14'">全日空航空</div>
<div class="lh200" :class="$q.platform.is.desktop ? 'f16' : 'f12'">
全日本空输(ANA)是一家日本的航空公司。
也是亚洲最大的航空公司之一，被评之为五星航空
为我社日本系列团主要配搭航空之一。
</div>
</div>
</div>
<q-carousel
v-model="hotSilder"
v-model="airline"
transition-prev="slide-right"
transition-next="slide-left"
swipeable
......@@ -311,10 +524,22 @@ margin-right: 70px;
flat
class="bg-transparent rounded-borders q-mt-md"
>
<q-carousel-slide :name="index" v-for="(item, index) in Math.ceil(partnersList.length/topPageCount)" :key="index" class="column no-wrap">
<div class="row fit justify-start items-center q-gutter-md q-col-gutter no-wrap">
<template v-for="(x,i) in topPageCount">
<img :key="i" v-if="(i+(index*topPageCount))<partnersList.length" :product="partnersList[i+(index*topPageCount)]" class="partner" src="../assets/img/about/banner.png" />
<q-carousel-slide
:name="index"
v-for="(item, index) in Math.ceil(airlineList.length / airlineCount)"
:key="index"
class="column no-wrap"
>
<div
class="row fit justify-start items-center q-gutter-md q-col-gutter no-wrap"
>
<template v-for="(x, i) in airlineCount">
<img @click="clickAirline(airlineList[i + index * airlineCount])"
:key="i"
v-if="i + index * airlineCount < airlineList.length"
class="partner"
:src="require(`../assets/img/about/${airlineList[i + index * airlineCount]}.png`)"
/>
</template>
</div>
</q-carousel-slide>
......@@ -326,9 +551,38 @@ margin-right: 70px;
export default {
data() {
return {
hotSilder:0,
topPageCount: 10,
partnersList: [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,],
hotSilder: 0,
prize: 0,
airline: 0,
lineListCount: 2,
airlineCount:2,
prizesCount: 2,
lineListWidth: 250,
airlineWidth: 190,
prizesWidth: 192,
lineList: [{
tag:'A',
label: "出境日本线",
city: ['东京', '奈良']
},{
tag:'B',
label: "出境欧洲线",
city: ['瑞典', '土耳其']
},{
tag:'C',
label: "出境南亚线",
city: ['斯里兰卡']
},{
tag:'D',
label: "出境中东非线",
city: ['埃及']
},{
tag:'E',
label: "国内线",
city: ['四川', '西藏']
},],
airlineList: ['logo-dongfang','logo-guoji','logo-hongkong','logo-kateer','logo-quanri','logo-sichaun','logo-taiguo'],
airlineSelect: 'logo-dongfang',
prizesList: [
{
img: "prize-2009",
......@@ -375,5 +629,32 @@ export default {
],
};
},
mounted() {
this.onWindowResize()
this.airlineSelect = this.airlineList[0]
window.addEventListener('resize', this.onWindowResize)
},
beforeDestroy() {
window.removeEventListener('resize', this.onWindowResize)
},
methods: {
clickAirline(item) {
this.airlineSelect = item
},
onWindowResize() {
console.log('onWindowResize', window.innerWidth)
if(this.$q.platform.is.mobile) {
return
}
let width = window.innerWidth
if(width > 1200) {
width = 1200
}
this.lineListCount = Math.floor(width/ this.lineListWidth)
this.airlineCount = Math.floor(width / this.airlineWidth)
this.prizesCount = Math.floor(width / this.prizesWidth)
console.log('this.lineListCount', this.lineListCount,this.airlineCount,this.prizesCount)
}
}
};
</script>
\ No newline at end of file
src/pages/resetPassword.vue
View file @ 80efe44c
......@@ -93,27 +93,54 @@
<div class="login-box" :class="$q.platform.is.desktop ? 'login-box-pc': ''">
<div class="f34 bold">重置密码</div>
<div class="login_row">
<div class="form-group">
<div class="login_labelName">輸入郵箱</div>
<q-input outlined v-model="loginMsg.Mailbox" />
<div class="primary q-mt-sm" v-show="tips">邮箱格式有误,请核实</div>
</div>
<div>
<q-input
filled
v-model="loginMsg.Mailbox"
class="q-mt-xl"
label="輸入郵箱"
style="ime-mode: disabled"
aria-autocomplete="off"
:rules="[
(val) =>
/^[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/.test(
val
) || '請輸入正確的郵箱地址',
]"
>
<template
v-slot:after
>
<q-btn
v-if="!isSend" class="q-mb-lg"
unelevated
color="grey-3"
style="width: 100%; color: #8B8B8B !important; height: 50px; margin-top: 20px"
color="text-white bg-secondary"
:disable="
!/^[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/.test(
loginMsg.Mailbox
) || cutDown > 0
"
style="height: 46px; margin-top: -10px"
filled
label="发送验证码"
:loading="inSending"
:label="
!isSend
? '发送验证码'
: cutDown > 0
? cutDown + '秒'
: '重新發送'
"
@click="sendVerify"
/>
<div v-else class="mt q-mb-sm">
<q-input outlined v-model="loginMsg.MailCode" type="text" />
<div class="q-mt-sm" :class="cutDown ? 'text-grey-6' : ''">
{{ cutDown ? cutDown + "秒后可重新发送" : "重新發送驗證碼" }}
</div>
</div>
</template>
</q-input>
<div
class="q-mt-md"
>
<verify-code
:digit="6"
hint="請輸入正確的驗證碼"
ref="verify"
v-model="loginMsg.MailCode"
></verify-code>
</div>
<div class="form-group">
<div class="login_labelName flex justify-between items-center">
......@@ -161,10 +188,11 @@
<script>
import QrcodeVue from "qrcode.vue";
import verifyCode from "src/components/auth/verifyCode.vue";
export default {
name: "Login",
components: {
QrcodeVue,
QrcodeVue,verifyCode
},
data() {
return {
......@@ -183,6 +211,7 @@ export default {
logo: "",
flag: 2,
mylabel: "重置密码",
inSending: false,
};
},
created() {},
......
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