Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
a0a43001 by simon
Options

首页

1 parent 29c430bd
Inline Side-by-side
Showing 20 changed files with 667 additions and 190 deletions
......@@ -438,28 +438,7 @@ textarea {
}
}
.el-select .el-input.is-focus .el-input__inner {
border-color: transparent !important;
}
.ipt .el-input__inner {
border: none !important;
background-color: transparent !important;
padding: 0 !important;
}
.el-select-dropdown__item.selected {
color: $cOrange !important;
}
.el-input__suffix {
display: none;
}
.clarms .el-input__inner {
font-size: 22px;
border: none;
}
.ql-editor {
padding: 0px 0px !important;
......
......@@ -1099,7 +1099,7 @@ module.exports = {
},
title: {
t1: "「平安·傳家福」分紅終身壽險計劃",
t2: "美好重要的事物總是值得更好的守護，「平安·傳家福」分紅終身壽險計劃，提供長期儲蓄回報和終身人壽保障，幫助您持續滾存財富，保護您的收入和財富。 「平安．傳家福」設計具有獨特的功能，並保證最低回報，為您及摯愛家庭的未來做好準備。",
t2: "美好重要的事物總是值得更好的守護，「平安·傳家福」分紅終身壽險計劃，提供長期儲蓄回報和終身人壽保障，幫助您持續滾存財富，保護您的收入和財富。「平安·傳家福」設計具有獨特的功能，並保證最低回報，為您及摯愛家庭的未來做好準備。",
t3: "",
t4: "",
},
......
......@@ -1104,7 +1104,7 @@ module.exports = {
},
title: {
t1: "「平安·传家福」分红终身寿险计划",
t2: "美好重要的事物总是值得更好的守护，「平安·传家福」分红终身寿险计划，提供长期储蓄回报和终身人寿保障，帮助您持续滚存财富，保护您的收入和财富。 「平安．传家福」设计具有独特的功能，并保证最低回报，为您及挚爱家庭的未来做好准备。",
t2: "美好重要的事物总是值得更好的守护，「平安·传家福」分红终身寿险计划，提供长期储蓄回报和终身人寿保障，帮助您持续滚存财富，保护您的收入和财富。「平安·传家福」设计具有独特的功能，并保证最低回报，为您及挚爱家庭的未来做好准备。",
t3: "",
t4: "",
},
......
......@@ -71,7 +71,10 @@ export default {
this.bannerTipsVisible = false;
},
bottomBtnHandle() {
this.btnNavigateTo(this.bottomBtnType, this.bottomBtnLink);
// this.btnNavigateTo(this.bottomBtnType, this.bottomBtnLink);
this.$router.push({
path:"/custom/service?q=m6"
})
},
btnNavigateTo(type, link) {
switch (type) {
......
......@@ -893,9 +893,13 @@ $borderSize: 6px;
.tt {
// width: 100%;
.ff{
.nn{
padding: 24px 0;
}
}
}
.label {
padding: 12px;
}
......@@ -908,63 +912,13 @@ $borderSize: 6px;
padding: 0;
}
}
}
}
.guarantee2 {
.tit {
font-size: $fontSizeTitle-M2;
}
.container {
flex-wrap: wrap;
.table {
margin-top: 24px;
font-size: $fontSize-M2;
width: auto;
.smal {
font-size: $fontSizeSmall-M2;
}
&-item {
flex-wrap: nowrap;
min-height: auto;
.val {
padding: 12px;
}
}
&-item-3 {
.val {
padding: 0;
}
}
&-item-4 {
.val {
padding: 0;
}
}
.titl {
&-item {
font-size: $fontSize-M2;
}
}
&-item2{
}
}
}
// 下载
.download {
margin: 48px auto 0;
......
......@@ -2,79 +2,107 @@
* 页面描述:官网首页
*/
import api from "@/api/api";
import { httpGet, httpPost } from "@/api/fetch-api.js";
import api from '@/api/api';
import {
httpGet,
httpPost
} from '@/api/fetch-api.js';
import {
mapGetters,
mapActions,
mapState
} from "vuex";
var UA = require("ua-device");
import DatePicker from "@/components/date-picker/date-picker.vue";
import { ddMMyyyy2yyyyMMdd } from "@utils/utils.js";
export default {
data() {
return {
key: 'value',
key: "value",
// swiper
swiperOption: {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
pagination: {
el: '.swiper-pagination',
clickable: true,
el: ".swiper-pagination",
clickable: true
},
autoplay: {
delay: 5000,
stopOnLastSlide: false,
disableOnInteraction: false
},
speed: 1000,
speed: 1000
},
bannerList: [],
bannerCandidateList: [],
// 导航菜单
tabList: [{
name: "平安“好e時”<br>自願醫保標準計劃",
url: "",
id: 0,
}, {
name: "「平安 ‧ 傳家福<br>分紅終身壽險計劃",
url: "",
id: 1,
}, {
name: "Ping An 'Pro Easy'<br>VHIS Standard Plan",
url: "",
id: 2,
}, {
name: "Ping An GenRich<br>Insurance Plan",
url: "",
id: 3,
}, {
name: "Ping An 'Pro Easy'<br>VHIS Standard Plan",
url: "",
id: 4,
}],
curTab: {}
}
tabList: [
{
name: "平安“好e時”<br>自願醫保標準計劃",
url: "",
index: 0
},
{
name: "「平安 ‧ 傳家福<br>分紅終身壽險計劃",
url: "",
index: 1
},
{
name: "Ping An 'Pro Easy'<br>VHIS Standard Plan",
url: "",
index: 2
},
{
name: "Ping An GenRich<br>Insurance Plan",
url: "",
index: 3
},
{
name: "Ping An 'Pro Easy'<br>VHIS Standard Plan",
url: "",
index: 4
}
],
curTab: {},
// 投保
quoteData: {
gender: 1
},
// 投保背景图
quoteBgUrl:"https://kdcdn.oss-cn-shenzhen.aliyuncs.com/temp/pingan-life/index-quote-bg-temp.png",
// 表单
formData: {
gender: "",
birthDate: ""
},
// 性别列表
genderList: [
{
n: "先生",
v: "M"
},
{
n: "女士",
v: "F"
}
],
// 错误提示
errTips:""
};
},
components: {
DatePicker
},
components: {},
computed: {
locale() {
return this.$i18n.locale || 'tc';
return this.$i18n.locale || "tc";
},
i18n() {
return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
},
return this.$i18n.messages && this.$i18n.locale
? this.$i18n.messages[this.$i18n.locale]
: {};
}
},
methods: {
initData() {
this.curTab = this.tabList[0];
this.fetchBanner().then(res => {
......@@ -100,7 +128,7 @@ export default {
this.bannerCandidateList.forEach(element => {
bannerList.push(element[key]);
});
this.$set(this, 'bannerList', bannerList);
this.$set(this, "bannerList", bannerList);
},
btnNavigateTo(type, link) {
switch (type) {
......@@ -132,6 +160,33 @@ export default {
// 选择标签
onTabHandler(item) {
this.curTab = item;
},
// 投保组件性别选择
onQuoteSexHandler(gender) {
this.quoteData.gender = gender;
},
onPrevTabHandler() {
if (this.tabList.length <= 0) return;
let index = this.curTab.index;
index--;
if (index < 0) {
index = this.tabList.length - 1;
}
this.curTab = this.tabList[index];
},
onNextTabHandler() {
if (this.tabList.length <= 0) return;
let index = this.curTab.index;
index++;
if (index >= this.tabList.length) {
index = 0;
}
this.curTab = this.tabList[index];
},
toContactUs() {
this.$router.push({
path: "/custom/service?q=m1"
});
}
},
beforeDestroy() {},
......@@ -145,5 +200,4 @@ export default {
} catch (e) {}
});
}
}
};
......
@import '@/styles/_support.scss';
@import "@/styles/_support.scss";
.page {}
.page {
font-size: 22px;
}
.top-space {
height: 27px;
}
.box {
......@@ -61,7 +62,6 @@
min-width: 288px;
margin-left: 12px;
background: url("~@assets/images/vhis/vhis-btn.png");
}
.banner-btn:lang(zh) {
......@@ -105,7 +105,7 @@
font-weight: bold;
color: $cOrange2;
width: 1200px;
max-width: 1200px;
margin: 0 auto;
&-item {
......@@ -177,7 +177,7 @@
cursor: pointer;
.icon {
background-image: url('~@/assets/images/index/icon-contact-tips.png');
background-image: url("~@/assets/images/index/icon-contact-tips.png");
@extend .bis;
width: 35px;
height: 31px;
......@@ -189,12 +189,174 @@
// 线上报价
.quote {
background: url('~@/assets/images/index/index-quote-bg-temp.png') center no-repeat;
// background: url("~@/assets/images/index/index-quote-bg-temp.png") center
// no-repeat;
width: 100%;
height: 1482px;
;
overflow: hidden;
margin: 52px auto 0;
.space1 {
height: 540px;
}
.tit {
font-size: 36px;
font-weight: bold;
text-align: center;
color: $cOrange2;
&:lang(zh) {
letter-spacing: 1.8px;
}
}
.tit2 {
width: 720px;
margin: 40px auto 0;
text-align: center;
color: #ffffff;
text-shadow: 0px 0px 16px rgba(0, 0, 0, 1);
}
.table {
width: 1200px;
margin: 56px auto 0;
&-tab {
position: relative;
width: 100%;
display: flex;
justify-content: center;
margin-left: 2px;
&-item {
background-image: url("~@/assets/images/index/index-tab.png");
@extend .bis;
@extend .fcc;
height: 73px;
margin: 0 -14px;
font-size: $fontSize-M2;
color: $cOrange2;
font-weight: bold;
cursor: pointer;
&-act {
background-image: url("~@/assets/images/index/index-tab-act.png");
color: #ffffff;
}
}
}
&-cont {
@include linear-bg;
height: 380px;
margin: -4px auto 0;
position: relative;
z-index: 11;
display: flex;
.panel {
position: relative;
margin-top: 5px;
width: 50%;
}
.panel-left {
position: relative;
@extend .fcc;
.desc {
&-item {
font-size: 22px;
color: #ffffff;
line-height: 1.6;
&:lang() {
letter-spacing: 1.1px;
}
}
}
}
.panel-right {
background-color: #ffffff;
@extend .fcc;
.func {
}
.func1 {
&-item {
display: flex;
align-items: center;
margin: 32px auto;
.k {
@extend .bb;
padding-right: 12px;
width: 120px;
}
.gender {
display: flex;
&-item {
display: flex;
align-items: center;
margin-right: 30px;
cursor: pointer;
img {
margin-left: 8px;
}
}
}
.age {
.ipt-wrap-linear {
width: 222px;
}
}
}
}
}
.arrow {
position: absolute;
width: 44px;
height: 73px;
top: 32%;
cursor: pointer;
z-index: 21;
}
.arrow-left {
background-image: url("~@/assets/images/index/arrow-left.png");
left: -64px;
}
.arrow-right {
background-image: url("~@/assets/images/index/arrow-right.png");
right: -64px;
}
}
}
.quote-btn {
@include btc4(300px, 50px, 22px);
margin: 40px auto 0;
&:lang(zh) {
letter-spacing: 1.1px;
}
}
.customer-service {
margin-top: 24px;
font-size: 22px;
font-weight: bold;
text-align: center;
color: #ffffff;
.udl {
display: inline-block;
border-bottom: solid 2px #ffffff;
border-radius: 1px;
}
&:lang(zh) {
letter-spacing: 1.1px;
}
}
}
// 联系我们表单
......@@ -217,13 +379,13 @@
}
}
.t2{
.t2 {
margin-top: 50px;
font-size: 24px;
font-weight: bold;
}
.pic-mobile{
.pic-mobile {
margin-top: 248px;
}
}
......@@ -232,22 +394,78 @@
@extend .bb;
flex: 1;
padding-left: 40px;
.form{
.form {
width: 100%;
// height: 600px;
// background-color: wheat;
&-item {
margin-bottom: 28px;
.ipt-wrap-linear {
.cont {
.ipt {
text-align: center;
}
.sel {
}
.textarea {
@extend .bb;
padding-top: 16px;
text-align: left;
height: 238px;
}
.ipt-date {
padding: 0 24px;
width: 100%;
background-color: #ffffff;
border-radius: $borderRadius;
@include border-tans;
border-radius: 5px;
}
}
}
.dear {
width: 40%;
margin-right: 26px;
}
.name {
width: 60%;
}
&:last-child() {
margin-bottom: 0;
}
}
}
.err-tips {
font-size: $fontSizeSmall-M2;
color: $cOrange;
min-height: 28px;
margin: 12px 0;
}
.submit-btn {
@include linear-bg();
margin: 0 auto 0;
@include btc4(300px, 50px, 22px);
&:lang(zh) {
letter-spacing: 1.1px;
}
}
}
}
}
.swiper-button-prev {
background-image: url('~@/assets/images/common/button-prev.png');
background-image: url("~@/assets/images/common/button-prev.png");
left: 360px;
}
.swiper-button-next {
background-image: url('~@/assets/images/common/button-next.png');
background-image: url("~@/assets/images/common/button-next.png");
right: 360px;
}
......@@ -257,7 +475,7 @@
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal>.swiper-pagination-bullets {
.swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 48px;
}
......@@ -281,12 +499,11 @@
.content {
@include content-percent();
}
}
@media (max-width: 768px) {
.content {}
.content {
}
.banner-contaner {
height: auto;
......@@ -302,8 +519,7 @@
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal>.swiper-pagination-bullets {
.swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 2px;
}
}
......
<template>
<div class="page page-index">
<div class="banner-contaner">
......@@ -6,38 +5,62 @@
<div class="banner banner-pc">
<swiper :options="swiperOption">
<swiper-slide v-for="(item,index) in bannerList" :key="index">
<img class="banner-img" :src="item.pcBannerUrl">
<swiper-slide v-for="(item, index) in bannerList" :key="index">
<img class="banner-img" :src="item.pcBannerUrl" />
<div class="btn-wrap">
<div v-for="(btnItem, btnIndex) in item.btns" :key="btnIndex">
<div class="banner-btn" v-if="btnItem.n && btnItem.t && btnItem.c" @click="btnNavigateTo(btnItem.t,btnItem.l)" :style="{backgroundColor:btnItem.c}">{{btnItem.n}}</div>
<div
class="banner-btn"
v-if="btnItem.n && btnItem.t && btnItem.c"
@click="btnNavigateTo(btnItem.t, btnItem.l)"
:style="{ backgroundColor: btnItem.c }"
>
{{ btnItem.n }}
</div>
</div>
</div>
</swiper-slide>
<!-- <div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div> -->
<div class="swiper-button-next" slot="button-next"></div>-->
<!-- <div class="swiper-pagination" slot="pagination"></div> -->
</swiper>
</div>
<div class="banner banner-mobile">
<swiper class="swiper" :options="swiperOption">
<swiper-slide v-for="(item,index) in bannerList" :key="index">
<img class="banner-img" :src="item.mobileBannerUrl">
<swiper-slide v-for="(item, index) in bannerList" :key="index">
<img class="banner-img" :src="item.mobileBannerUrl" />
<div class="btn-wrap">
<div class="banner-btn" v-for="(btnItem, btnIndex) in item.btns" :key="btnIndex" @click="btnNavigateTo(btnItem.t,btnItem.l)" :style="{color:btnItem.c}">{{btnItem.n}}&nbsp;&gt;</div>
<div
class="banner-btn"
v-for="(btnItem, btnIndex) in item.btns"
:key="btnIndex"
@click="btnNavigateTo(btnItem.t, btnItem.l)"
:style="{ color: btnItem.c }"
>
{{ btnItem.n }}&nbsp;&gt;
</div>
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
<!-- <div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div> -->
<div class="swiper-button-next" slot="button-next"></div>-->
</div>
<!-- 导航菜单切换 -->
<div class="nav-tab">
<div @click="onTabHandler(item)" v-html="item.name" v-for="item in tabList" :key="item.id" class="nav-tab-item" :class="{'nav-tab-item-act':item.id == curTab.id}" :style="'width: calc(100% / '+tabList.length+');'">{{item.name}}</div>
<div
@click="onTabHandler(item)"
v-html="item.name"
v-for="item in tabList"
:key="item.id"
class="nav-tab-item"
:class="{ 'nav-tab-item-act': item.index == curTab.index }"
:style="'width: calc(100% / ' + tabList.length + ');'"
>
{{ item.name }}
</div>
</div>
<!-- 推荐 为什么选择平安人寿 -->
<div class="content recommend">
......@@ -45,52 +68,260 @@
<div class="features">
<div class="features-item">
<div class="icon">
<img src="@/assets/images/index/recommend-icon-1.png" alt="">
<img src="@/assets/images/index/recommend-icon-1.png" alt />
</div>
<div class="desc">
簡單方便
<br />線上客戶服務系統
</div>
<div class="desc">簡單方便<br>線上客戶服務系統</div>
</div>
<div class="features-item">
<div class="icon">
<img src="@/assets/images/index/recommend-icon-2.png" alt="">
<img src="@/assets/images/index/recommend-icon-2.png" alt />
</div>
<div class="desc">
信心保證
<br />服務超過2億客戶
</div>
<div class="desc">信心保證<br>服務超過2億客戶</div>
</div>
<div class="features-item">
<div class="icon">
<img src="@/assets/images/index/recommend-icon-3.png" alt="">
<img src="@/assets/images/index/recommend-icon-3.png" alt />
</div>
<div class="desc">
國際級
<br />風險管理
</div>
<div class="desc">國際級<br>風險管理</div>
</div>
</div>
<div class="contact-tips">
<div @click="toContactUs" class="contact-tips">
<span class="icon"></span>
聯絡我們
</div>
</div>
<!-- 线上报价 -->
<div class="quote"></div>
<div
class="quote"
:style="
'background: url(' +
quoteBgUrl +
') center no-repeat;'
"
>
<div class="space1"></div>
<div class="tit">線上報價 閃速投保</div>
<div class="tit2">
平安「好e時」自願醫保標準計劃為政府自願醫保認可的標準計劃，
涵蓋重點醫療保障，投保流程簡易，全程線上進行。
</div>
<!-- tab表格 -->
<div class="table">
<div class="table-tab">
<div
@click="onTabHandler(item)"
v-html="item.name"
v-for="(item, index) in tabList"
:key="item.id"
class="table-tab-item"
:class="{ 'table-tab-item-act': item.index == curTab.index }"
:style="
'width: calc(100% / ' +
tabList.length +
');z-index:' +
(tabList.length - index) +
''
"
>
{{ item.name }}
</div>
</div>
<div
class="table-cont"
:style="'width: calc(100% - 29px *' + (tabList.length - 1) + ')'"
>
<div @click="onPrevTabHandler()" class="arrow arrow-left"></div>
<div @click="onNextTabHandler()" class="arrow arrow-right"></div>
<div class="panel panel-left">
<div class="desc">
<div class="desc-item">・潛在長線資本增值</div>
<div class="desc-item">・創建家族財富</div>
<div class="desc-item">・身故及意外身故賠償</div>
<div class="desc-item">・保單持有人意外身故賠償</div>
<div class="desc-item">・自選保費繳付期</div>
<div class="desc-item">・彈性賠償支付方式</div>
<div class="desc-item">・豁免醫療核保</div>
</div>
</div>
<div class="panel panel-right">
<div class="func func1">
<div class="func1-item">
<div class="k">性別</div>
<div class="gender">
<div class="gender-item " @click="onQuoteSexHandler(1)">
男性
<img
v-if="quoteData.gender == 1"
src="@/assets/images/common/icon-male-act.png"
alt=""
/>
<img
v-else
src="@/assets/images/common/icon-male.png"
alt=""
/>
</div>
<div class="gender-item" @click="onQuoteSexHandler(2)">
女性
<img
v-if="quoteData.gender == 2"
src="@/assets/images/common/icon-female-act.png"
alt=""
/>
<img
v-else
src="@/assets/images/common/icon-female.png"
alt=""
/>
</div>
</div>
</div>
<div class="func1-item">
<div class="k">年齡</div>
<div class="age">
<div class="ipt-wrap-linear">
<div class="down-arrow"></div>
<div class="cont">
<el-select
class="ipt"
v-model="formData.gender"
:placeholder="'年龄'"
>
<el-option
v-for="(item, index) in 100"
:key="index"
:label="item"
:value="item"
></el-option>
</el-select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="quote-btn">立即報價</div>
<div class="customer-service">
我想<span @click="toContactUs" class="udl pointer">聯絡客服</span>
</div>
</div>
<!-- 联系我们表单 -->
<div class="contact">
<div class="box-w panel">
<div class="panel-left">
<div class="t1">如欲了解我們的產品，<br>歡迎聯絡我們。</div>
<div class="t1">
如欲了解我們的產品，
<br />歡迎聯絡我們。
</div>
<div class="t2">想了解更多？致電2983 8866^聯絡我們。</div>
<img class="pic-mobile" src="@/assets/images/index/index-mobile.png" alt="">
<img
class="pic-mobile"
src="@/assets/images/index/index-mobile.png"
alt
/>
</div>
<div class="panel-right">
<div class="form">
<div class="ipt-wrap2">
<div class="cont">
<input class="ipt" type="text">
<div class="form-item fl">
<!-- 称呼 -->
<div class="ipt-wrap-linear dear">
<div class="down-arrow"></div>
<div class="cont">
<el-select
class="ipt"
v-model="formData.gender"
:placeholder="'稱呼'"
>
<el-option
v-for="(item, index) in genderList"
:key="index"
:label="item.n"
:value="item.v"
></el-option>
</el-select>
</div>
</div>
<!-- 姓名 -->
<div class="ipt-wrap-linear name">
<div class="cont">
<input class="ipt" type="text" placeholder="姓名*" />
</div>
</div>
</div>
<div class="form-item">
<!-- 联系电话 -->
<div class="ipt-wrap-linear">
<div class="cont">
<input class="ipt" type="text" placeholder="聯絡電話*" />
</div>
</div>
</div>
<div class="form-item">
<!-- 電郵 -->
<div class="ipt-wrap-linear">
<div class="cont">
<input class="ipt" type="text" placeholder="電郵*" />
</div>
</div>
</div>
<div class="form-item">
<!-- 理想聯絡時間 -->
<div class="ipt-wrap-linear">
<div class="down-arrow"></div>
<div class="cont">
<!-- <input class="ipt" type="text" placeholder="理想聯絡時間*" /> -->
<date-picker
class="ipt-date"
:formatter="'dd-MM-yyyy'"
:placeholder="'理想聯絡時間'"
v-model="formData.birthDate"
:filtModel="['future']"
:cusStyle="{
border: 'none !important',
'background-color': 'transparent !important',
padding: '16px 24px',
color: '#606266',
'text-align': 'center'
}"
></date-picker>
</div>
</div>
</div>
<div class="form-item">
<!-- 查詢事項 -->
<div class="ipt-wrap-linear">
<div class="cont">
<textarea
class="ipt textarea"
placeholder="查詢事項"
></textarea>
</div>
</div>
</div>
</div>
<!-- 错误提示 -->
<div class="err-tips">{{ errTips }}</div>
<div class="submit-btn">提交</div>
</div>
</div>
</div>
</div>
</template>
......@@ -98,3 +329,5 @@
<style lang="scss" scoped>
@import "./index.scss";
</style>
<style lang="scss"></style>
......
......@@ -15,7 +15,6 @@
color: $cDark;
}
// 提示栏
.alert {
@extend .bb;
......@@ -67,7 +66,7 @@
position: absolute;
top: 26.4px;
right: 24px;
background-image: url('~@/assets/images/common/down-arrow.png');
background-image: url("~@/assets/images/common/down-arrow.png");
width: 12px;
height: 8px;
pointer-events: none;
......@@ -78,7 +77,7 @@
position: absolute;
top: 14.4px;
right: 24px;
background-image: url('~@/assets/images/common/icon-eyes-off.png');
background-image: url("~@/assets/images/common/icon-eyes-off.png");
width: 27px;
height: 24px;
pointer-events: none;
......@@ -86,7 +85,7 @@
}
.eye-act {
background-image: url('~@/assets/images/common/icon-eyes-on.png');
background-image: url("~@/assets/images/common/icon-eyes-on.png");
}
}
......@@ -104,9 +103,9 @@
}
}
// 输入框
.ipt-wrap2 {
.ipt-wrap-linear {
position: relative;
.ipt {
@extend .bb;
width: 100%;
......@@ -115,7 +114,8 @@
border: 2px solid transparent;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(90deg, #fff, #fff), linear-gradient(90deg, #feab1b, #f15a08);
background-image: linear-gradient(90deg, #fff, #fff),
linear-gradient(90deg, #feab1b, #f15a08);
background-color: #ffffff;
padding: 0 24px;
......@@ -123,29 +123,33 @@
display: flex;
align-items: center;
font-size: 22px;
color: $cFontGray2;
&:lang(zh) {
letter-spacing: 1.1px;
}
}
::-webkit-input-placeholder {
color: rgba(102, 102, 102, 0.5);
}
.down-arrow {
position: absolute;
top: 26.4px;
top: 18px;
right: 24px;
background-image: url('~@/assets/images/common/down-arrow.png');
width: 12px;
height: 8px;
background-image: url("~@/assets/images/common/down-arrow-linear.png");
width: 20px;
height: 15px;
pointer-events: none;
cursor: default;
z-index: 1000;
}
.eye {
position: absolute;
top: 14.4px;
right: 24px;
background-image: url('~@/assets/images/common/icon-eyes-off.png');
background-image: url("~@/assets/images/common/icon-eyes-off.png");
width: 27px;
height: 24px;
pointer-events: none;
......@@ -153,12 +157,10 @@
}
.eye-act {
background-image: url('~@/assets/images/common/icon-eyes-on.png');
background-image: url("~@/assets/images/common/icon-eyes-on.png");
}
}
// 轮播
.swiper-pagination-bullet {
width: 12px !important;
......@@ -173,6 +175,7 @@
.alert {
padding: 4px 36px 4px 12px;
.icon {}
.icon {
}
}
}
......
......@@ -152,6 +152,7 @@
@mixin content-percent($percent:4%) {
box-sizing: border-box;
padding: 0 $percent;
}
@mixin border-tans($borderRadius:1px, $borderSize:2px) {
......
......@@ -2,13 +2,13 @@
$--color-primary: #f05a23;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
$--font-path: "~element-ui/lib/theme-chalk/fonts";
@import "~element-ui/packages/theme-chalk/src/index";
// @import '@/styles/_support.scss';
@import "@/styles/_var.scss";
.filter-comp{
.filter-comp {
.el-checkbox-group {
display: flex;
flex-wrap: wrap;
......@@ -22,5 +22,39 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
font-size: 24px;
}
}
}
.el-select .el-input.is-focus .el-input__inner {
border-color: transparent !important;
}
.ipt .el-input__inner {
border: none !important;
background-color: transparent !important;
padding: 0 !important;
}
.el-select-dropdown__item.selected {
color: $cOrange !important;
}
.el-input__suffix {
display: none;
}
.page-index .el-input__inner,
.clarms .el-input__inner {
font-size: 22px;
border: none;
}
.page-index .contact .el-input__inner {
text-align: center;
}
.page-index .quote .el-input__inner {
text-align: center;
color: $cOrange2;
font-size: 22px;
font-weight: bold;
}
......