Skip to content

dev / pingan-life-index-pro

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

页首修改

1 parent 3b13238d
Inline Side-by-side
Showing 25 changed files with 2282 additions and 166 deletions
/**
* 组件描述:PC顶栏导航下拉菜单
*/
import api from '@/api/api'
import {
httpPost
} from '@/api/fetch-api.js'
export default {
name: "DropDownList",
data() {
return {
activeIndex: 0,
sTitle: this.dataObj && this.dataObj.name || '',
reloadBlackList: []
};
},
props: {
/**
* 导航类型
* nav:普通菜单导航
* login:登陆菜单
* lang:三语切换菜单
*/
type: {
type: String,
default () {
return "nav";
}
},
/**
* 传入菜单完整数据
*/
dataObj: {
type: Object,
default () {
return {};
}
},
/**
* 传入菜单列表
*/
dataList: {
type: Array,
default () {
return [];
}
},
labelProperty: {
type: String,
default () {
return "name";
}
}
},
directives: {
dpl: {
bind(el) {
el.style.display = "none";
}
}
},
methods: {
onNavHandler() {
console.log("this.dataObj:", this.dataObj);
let path = this.dataObj && this.dataObj.path || "";
if (path) {
this.$router.push({
path: path
})
}
},
onOverHandler(event) {
let ul = event.currentTarget.childNodes[1].childNodes[1];
ul.style.display = "block";
},
onOutHandler(event) {
// console.log(event);
let ul = event.currentTarget.childNodes[1].childNodes[1];
ul.style.display = "none";
},
onClickHandler(event, index) {
// 隐藏其他
if (this.$refs.ul) {
this.$refs.ul.style.display = "none";
}
// 选择item
this.activeIndex = index;
let curData = this.dataList[index];
if (this.type == "lang") {
// 如果是语言设置，则设置语言
let lang = curData.value;
if (lang != localStorage.getItem('lang')) {
localStorage.setItem("lang", lang);
if (this.reloadBlackList.indexOf(this.$route.path) >= 0) {
window.location.reload();
} else {
this.$i18n.locale = lang;
this.sTitle = curData.name;
this.$root.eventBus.$emit("langChange");
}
}
} else {
let item = curData;
let path = item && item.path || "";
this.$root.eventBus.$emit(item.path);
if (path) {
// console.log("path:", path);
// modify
if (path == "/custom/service?q=m5") {
path = "/clarms"
}
this.$router.push({
path: path
})
} else {
let value = item && item.value || null;
if (value) {
switch (value) {
case "login":
this.onLoginHandler();
break;
case "logout":
this.logoutHandler();
break;
case "gotoVHIS":
// gotoVHIS(this.$i18n.locale);
this.$router.push({
path: "/vhis"
});
break;
}
}
}
}
},
onLoginHandler() {
this.$root.eventBus.$emit("login");
if (this.$route.name == "login") {
return;
} else if (this.$route.name == "register" || this.$route.name == "passwordFind") {
this.$router.push({
path: "/login"
});
} else {
let callback = this.$route.fullPath;
this.$router.push({
path: "/login?callback=" + callback
});
}
},
logoutHandler() {
this.clearCache();
httpPost({
url: api.logout
}).then(() => {
this.$store.commit("SET_USER_INFO", null);
this.showLogoutTip();
});
},
clearCache() {
for (let index = 0; index < sessionStorage.length; index++) {
let key = sessionStorage.key(index);
console.log(key);
sessionStorage.removeItem(key);
}
},
showLogoutTip() {
// 登出后的提示
// alert("登出成功");
},
updateTitle(name) {
this.sTitle = name || this.sTitle;
}
},
computed: {
dplLable() {
return this.dataList[this.activeIndex][this.labelProperty];
}
},
created() {},
};
@import '@/styles/_support.scss';
.drop-list {
display: inline-block;
min-width: 120px;
position: relative;
margin: 0 13.2px;
font-size: $fontSizeTitle;
.list {
position: absolute;
width: 132px;
left: 0;
right: 0;
margin: 0 auto;
font-size: $fontSize;
left: 50%;
transform: translateX(-50%); //居中处理
.space {
height: 18px;
}
}
span {
display: block;
text-align: center;
}
span:hover {}
ul {
display: none;
overflow: hidden;
box-shadow: 0 0 18px 0 rgba(255, 87, 0, 0.15);
border-radius: 6px;
li {
// border-bottom: solid 1px #f1f1f1;
background: #ffffff;
text-align: center;
padding: 18px 0;
position: relative;
&:after {
content: "";
width: 84px;
height: 1px;
background: #f1f1f1;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%); //居中处理
}
}
li:last-child {
border-bottom: none;
&:after {
background: transparent;
}
}
li:hover {
color: $cOrange;
}
}
}
.drop-list:lang(en){
min-width: 0;
margin: 0 32px;
}
.user {
width: 111px;
height: 36px;
border-radius: 36px;
background-color: $cOrange;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
margin: 0 auto;
span {
max-width: 51px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.icon-img {
margin: 0 6px;
}
}
// 登陆
.login {}
@media (max-width: 1100px) {
.drop-list {
margin: 0 28px;
min-width: 0;
}
.drop-list:lang(en) {
margin: 0 22px;
}
}
@media (max-width: 1000px) {
// .drop-list {
// margin: 0 20px;
// }
}
<template>
<div class="drop-list" :class="{'login':type=='login'}" @mouseover="onOverHandler($event)" @mouseout="onOutHandler($event)">
<!-- 登陆下拉样式 -->
<template v-if="type=='login'">
<div class="user" @click="onLoginHandler()">
<img class="icon-img" src="@/assets/images/home/icon-user.png">
<span>{{dataObj.name}}</span>
</div>
</template>
<!-- 其他下拉样式 -->
<template v-else>
<span @click="onNavHandler()">
{{type == "lang" ? sTitle : dataObj.name}}
</span>
</template>
<div class="list">
<div class="space"></div>
<ul ref="ul" >
<li v-for="(item, index) in dataList" :key="index" @mousedown="onClickHandler($event,index)">{{item[labelProperty]}}</li>
</ul>
</div>
</div>
</template>
<script src="./dropdown.js"></script>
<style lang="scss" scoped>
@import "./dropdown.scss";
</style>
/**
* 组件描述:页脚
* 静态页面
*/
export default {
data() {
return {
key: 'value',
qrcodeVisible: false,
}
},
components: {},
methods: {
onOverHandler(event) {
this.qrcodeVisible = true;
},
onOutHandler(event) {
this.qrcodeVisible = false;
},
toPage(name) {
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
this.$router.push({
name: name
})
},
toPath(path) {
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
this.$router.push({
path: path
})
},
initData() {}
},
mounted() {},
created() {}
}
@import '@/styles/_support.scss';
.v-footer {
color: #ffffff;
background-color: #2e2b2a;
font-size: $fontSize;
.footer-containter {
margin: 0 auto;
max-width: 1200px;
.cont {
.logo-wrap {
padding: 26px 0;
.logo-img {
cursor: pointer;
}
}
.line {
width: 100%;
height: 1px;
opacity: 0.2;
background-color: #ffffff;
}
// 信息
.info {
padding: 24px 0 24px;
display: flex;
// 热线
.hotline {
min-width: 294px;
.contact {
.n-item {
margin-bottom: 7.2px;
}
.phone {
color: $cOrange;
font-size: $fontSizeTitle;
font-weight: bold;
}
&:first-child {
margin-bottom: 24px;
}
}
}
// 导航
.nav {
display: flex;
.nav-v {}
.n-item {
cursor: pointer;
min-width: 177px;
}
}
.nav2 {
display: none;
}
// 公众号
.public {
position: relative;
text-align: left;
margin-left: 63.84px;
.qrcode-wrap {
text-align: center;
margin-top: 3.6px;
.qrcode {
width: 100px;
}
.c1 {
margin-top: 3.6px;
}
}
.icon {
margin-top: 9px;
margin-right: 12px;
display: inline-block;
}
}
// 公共组件
.n-item {
margin-bottom: 24px;
padding-right: 36px;
color: #dcdddd;
&:first-child {
margin-bottom: 32px;
}
&:last-child {
margin-bottom: 0;
}
}
}
// 版权
.copyright {
color: rgba(179, 177, 168, 0.5);
padding: 18px 0;
line-height: 1.58;
font-size: $fontSizeSmall;
}
}
}
}
@media (max-width: 1200px) {
.v-footer {
@include content-percent();
.footer-containter {
.cont {
.info {
display: block;
.hotline {}
.nav {
margin-top: 24px;
display: flex;
.nav-v {
width: 100%;
}
.n-item {
min-width: 0;
margin-right: 0;
padding-right: 10px;
}
}
.nav2 {
display: none;
}
.public {
margin: 0;
margin-top: 36px;
text-align: left;
min-height: 144px;
}
}
.copyright {
box-sizing: border-box;
padding-right: 24px;
}
}
}
}
}
@media (max-width: 768px) {
.v-footer {
font-size: $fontSizeSmall-M;
.footer-containter {
.cont {
.info {
display: flex;
justify-content: space-between;
.hotline {
min-width: 0;
.phone {
font-size: $fontSizeSmall-M !important;
font-weight: bold !important;
}
}
.nav {
display: none;
margin-top: 0;
.nav-v {}
.n-item {}
}
.nav2 {
display: block;
}
.public {
margin: 0;
min-width: 108px;
.qrcode-wrap {
img {
width: 84px;
}
.c1 {
display: none;
}
}
}
// 公共组件
.n-item {
margin-bottom: 24px;
&:first-child {
margin-bottom: 24px;
}
}
}
.copyright {}
}
}
}
}
<template>
<footer class="v-footer ">
<div class="footer-containter ">
<div class="cont">
<div class="logo-wrap">
<img class="logo-img" src="@/assets/images/home/footer-logo.png">
</div>
<div class="line"></div>
<!-- 信息 -->
<div class="info">
<div class="hotline">
<div class="contact">
<div class="n-item">{{$t('footer.hkPhone')}}</div>
<div class="phone">(852)2983 8866</div>
</div>
<div class="contact">
<div class="n-item">{{$t('footer.cnPhone')}}</div>
<div class="phone">(86)40078 95511</div>
</div>
</div>
<div class="nav">
<div class="nav-v">
<div @click="toPage('profile')" class="n-item">{{$t('footer.aboutUs')}}</div>
<div @click="toPage('profile')" class="n-item">{{$t('footer.companyIntroduction')}}</div>
<div @click="toPage('newsList')" class="n-item">{{$t('footer.news')}}</div>
<div @click="toPage('joinUs')" class="n-item">{{$t('footer.joinUs')}}</div>
</div>
<div class="nav-v">
<div @click="toPage('help')" class="n-item">{{$t('footer.helpCenter')}}</div>
<div @click="toPage('privacy')" class="n-item">{{$t('footer.privacy')}}</div>
<div @click="toPage('terms')" class="n-item">{{$t('footer.terms')}}</div>
<div @click="toPage('personalDataCollection')" class="n-item">{{$t('footer.protocol')}}</div>
</div>
<div class="nav-v">
<div @click="toPath('/custom/service?q=m1')" class="n-item">{{$t('footer.contactUs')}}</div>
<div @click="toPage('contactMethod')" class="n-item">{{$t('footer.contactInformation')}}</div>
<div @click="toPage('serviceNet')" class="n-item">{{$t('footer.service')}}</div>
<div @click="toPage('map')" class="n-item">{{$t('footer.map')}}</div>
</div>
</div>
<div class="nav nav2">
<div class="nav-v">
<div @click="toPage('privacy')" class="n-item">{{$t('footer.privacy')}}</div>
<div @click="toPage('terms')" class="n-item">{{$t('footer.terms')}}</div>
<div @click="toPage('personalDataCollection')" class="n-item">{{$t('footer.protocol')}}</div>
</div>
</div>
<div class="public">
<div class="tit">{{$t('footer.qrcode')}}</div>
<div @click="qrcodeVisible = !qrcodeVisible" v-if="qrcodeVisible" class="qrcode-wrap">
<img @mouseout="onOutHandler($event)" src="@/assets/images/home/qrcode.png" alt="">
<div class="c1">{{$t('footer.qrcodeBot')}}</div>
</div>
<template v-else>
<img @click="qrcodeVisible = !qrcodeVisible" @mouseover="onOverHandler($event)" @mouseout="onOutHandler($event)" class="icon pointer" src="@/assets/images/home/footer-icon-1.png" alt="">
<img class="icon pointer" src="@/assets/images/home/footer-icon-2.png" alt="">
<img class="icon pointer" src="@/assets/images/home/footer-icon-3.png" alt="">
</template>
</div>
</div>
<div class="line"></div>
<!-- 版权 -->
<div class="copyright">
{{$t('footer.copyright')}}
</div>
</div>
</div>
</footer>
</template>
<script src="./footer.js"></script>
<style lang="scss" scoped>
@import "./footer.scss";
</style>
/**
* 组件描述:官网顶栏导航
* 通过@midea 媒体查询决定显示PC/移动端样式
*/
import {
mapState
} from 'vuex'
import {
getObjByListKeyValue
} from '@utils/utils.js'
import VDropdown from '@components/home/dropdown/dropdown.vue'
import MDropdown from '@components/home/m-dropdown/m-dropdown.vue'
export default {
name: 'VHeader',
components: {
VDropdown,
MDropdown
},
computed: {
i18n() {
return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
}
},
data() {
return {
dropdownMVisible: false,
loginMVisible: false,
maxClientWidth: 1200,
// 用于传入到导航组件dropdown 常规导航菜单数据
navList: [],
// 用于传入到导航组件dropdown 登菜单数据
loginData: {},
// 用于传入到导航组件dropdown 语言菜单数据
langData: {
name: "繁",
path: "",
list: [{
name: "繁",
path: "",
value: "tc"
},
{
name: "简",
path: "",
value: "zh"
},
{
name: "EN",
path: "",
value: "en"
},
]
}
}
},
computed: {
...mapState({
isSmallScreen: state => state.isSmallScreen,
userInfo: state => state.userInfo
})
},
methods: {
toIndex() {
this.$router.push({
path: "/"
})
},
onShowDropdown(evtStr) {
this.dropdownMVisible = false;
this.loginMVisible = false;
if (evtStr == 'nav') {
this.dropdownMVisible = true;
} else if (evtStr == 'login') {
this.loginMVisible = true;
} else {}
},
checkIsSmallScreen() {
const self = this;
if (document.body.clientWidth > self.maxClientWidth) {
self.$store.commit('IS_SMALL_SCREEN', false)
} else {
self.$store.commit('IS_SMALL_SCREEN', true)
}
},
initData() {
let i18n = this.$i18n.messages[this.$i18n.locale] || {};
this.buildLoginMenu();
this.navList = i18n.nav.navList;
let curLang = getObjByListKeyValue(this.$i18n.locale, "value", this.langData.list)
this.langData.name = curLang.name;
},
/**
* 根据登陆状态构建登陆菜单
*/
buildLoginMenu() {
let i18n = this.$i18n.messages[this.$i18n.locale] || {};
let menuData = JSON.parse(JSON.stringify(i18n.nav.loginData));
let list = [];
if (this.userInfo && this.userInfo.name) {
menuData.name = this.userInfo.name;
if (this.$i18n.locale == "en" && this.userInfo.nameEn) {
menuData.name = this.userInfo.nameEn;
}
menuData.list.forEach(element => {
if (element.type == "auth") {
list.push(element);
}
});
} else {
menuData.list.forEach(element => {
if (element.type == "noAuth") {
list.push(element);
}
});
}
menuData.list = list;
this.$set(this, 'loginData', menuData);
}
},
beforeDestroy() {
window.removeEventListener('resize', this.checkIsSmallScreen(), false)
},
mounted() {
window.addEventListener('resize', () => this.checkIsSmallScreen(), false);
this.$root.eventBus.$on("langChange", () => {
this.initData();
});
},
watch: {
userInfo(val) {
this.buildLoginMenu();
}
},
created() {
this.initData();
},
}
@import '@/styles/_support.scss';
$navHei: 92px;
$navHeiM: 72px;
.v-header {
height: $navHei;
background-color: #fff;
color: $cFontGray;
position: relative;
z-index: 1000;
font-size: $fontSize;
.header-container {
max-width: 1200px;
height: 100%;
margin: auto;
display: flex;
align-items: center;
position: relative;
}
.main-nav {
height: 100%;
flex: 1 0 auto;
}
.logo-img {
margin-right: 43.2px;
max-width: 213px;
cursor: pointer;
}
.nav-list {
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
position: relative;
}
.nav-item {
display: flex;
align-items: center;
height: 100%;
margin: 0;
-ms-flex-pack: center;
justify-content: center;
position: relative;
cursor: pointer;
}
.main-nav-list {
display: flex;
cursor: pointer;
}
.nav-item.link-item {
padding: 0 50px;
height: 60px;
}
.nav-item.search {
flex: 1 1 auto;
}
.nav-item.auth {
color: #ffffff;
.lang {
color: $cOrange;
min-width: 96px;
}
}
}
.pc {
display: block;
}
// 移动端导航
.mobile {
display: none;
&-nav-list {
position: absolute;
right: 0;
top: 24px;
display: flex;
align-items: center;
img {
width: 20px;
margin-left: 20px;
}
}
}
@media (max-width: 1200px) {
.v-header {
@include content-percent(1%);
}
}
@media (max-width: 1100px) {
.v-header {
.logo-img {
margin-right: 24px;
}
}
.pc {
.auth {
margin-right: 20px;
}
.nav-item.auth {
.lang {
min-width: auto;
}
}
}
}
@media (max-width: 980px) {
.v-header {
@include content-percent();
.main-nav {}
.logo-img {
max-width: 213px;
margin: 0;
}
.pc {
display: none;
}
.mobile {
display: block;
&-nav-list {
top: 32px;
}
}
}
}
@media (max-width: 768px) {
.v-header {
// 原1200px临界样式
.pc {
display: none;
}
height: $navHeight-M;
.logo-img {
width: 186px;
margin: 0;
}
.mobile {
display: block;
&-nav-list {
top: 24px;
}
}
}
}
<template>
<header class="v-header">
<div class="header-container">
<img @click="toIndex" src="@/assets/images/home/header-logo.png" alt="中国平安人寿保险" class="logo-img">
<div class="main-nav">
<!-- mobile -->
<div class="nav-list-m mobile">
<div class="mobile-nav-list">
<img @click="onShowDropdown('login')" v-if="!loginMVisible" src="@/assets/images/home/mobile-user.png" alt="">
<img @click="onShowDropdown('')" v-else src="@/assets/images/home/mobile-user.png" alt="">
<img @click="onShowDropdown('nav')" v-if="!dropdownMVisible" src="@/assets/images/home/mobile-nav.png" alt="">
<img @click="onShowDropdown('')" v-else src="@/assets/images/home/mobile-nav-close.png" alt="">
</div>
<m-dropdown class="lang" :type="'nav'" :visible="dropdownMVisible" :show-dropdown-m="onShowDropdown" :lang-list="langData.list" ref="pcMenu"></m-dropdown>
<m-dropdown class="lang" :type="'login'" :visible="loginMVisible" :show-dropdown-m="onShowDropdown"></m-dropdown>
</div>
<!-- pc -->
<div class="nav-list pc">
<div class="main-nav-list">
<v-dropdown v-for="item in navList" :key="item.id" :data-obj="item" :data-list="item.list">
</v-dropdown>
</div>
<div class="nav-item search"></div>
<div class="nav-item auth">
<v-dropdown class="lang" :type="'login'" :data-obj="loginData" :data-list="loginData.list" ref="mobileMenu"></v-dropdown>
<v-dropdown class="lang" :type="'lang'" :data-obj="langData" :data-list="langData.list"></v-dropdown>
</div>
</div>
</div>
</div>
</header>
</template>
<script src="./header.js"></script>
<style lang="scss" scoped>
@import "./header.scss";
</style>
import {
mapState
} from 'vuex'
import api from '@/api/api'
import {
httpPost
} from '@/api/fetch-api.js'
export default {
name: "DropDownList",
data() {
return {
navList: [],
activeNames: [],
activeName: [],
activeIndex: -1,
borderBoo: false
};
},
props: {
visible: {
type: Boolean,
default () {
return false;
}
},
/**
* 导航类型
* nav:普通菜单导航
* login:登陆菜单
* lang:三语切换菜单
*/
type: {
type: String,
default () {
return "nav";
}
},
/**
* 传入菜单列表
*/
langList: {
type: Array,
default () {
return [];
}
},
// 显示/隐藏移动端导航
showDropdownM: {
type: Function,
default: null
},
},
computed: {
...mapState({
isSmallScreen: state => state.isSmallScreen,
userInfo: state => state.userInfo
}),
locale() {
return this.$i18n.locale || 'tc';
},
i18n() {
return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
},
},
methods: {
// 跳转菜单
onClickHandler(item) {
let path = item && item.path || "";
this.showDropdownM('');
if (path) {
this.$router.push({
path: path
})
} else {
let value = item && item.value || null;
if (value) {
switch (value) {
case "login":
this.onLoginHandler();
break;
case "logout":
this.logoutHandler();
break;
case "gotoVHIS":
// gotoVHIS(this.$i18n.locale);
this.$router.push({
path: "/vhis"
});
break;
}
}
}
},
onLoginHandler() {
if (this.$route.name == "login") {
return;
} else if (this.$route.name == "register" || this.$route.name == "passwordFind") {
this.$router.push({
path: "/login"
});
} else {
let callback = this.$route.fullPath;
this.$router.push({
path: "/login?callback=" + callback
});
}
},
logoutHandler() {
this.clearCache();
httpPost({
url: api.logout
}).then(() => {
this.$store.commit("SET_USER_INFO", null);
this.showLogoutTip();
});
},
clearCache() {
for (let index = 0; index < sessionStorage.length; index++) {
let key = sessionStorage.key(index);
sessionStorage.removeItem(key);
}
},
// 点击item
onChangeHandler(evt) {
this.activeIndex = evt;
},
/**
* 设置语言
*/
setLangHandler(curData) {
this.showDropdownM('');
// 如果是语言设置，则设置语言
let lang = curData.value;
this.$i18n.locale = lang;
localStorage.setItem("lang", lang);
this.sTitle = curData.name;
window.location.reload();
},
initData() {
let navList = [];
if (this.type == "nav") {
navList = this.i18n.nav.navList;
navList.forEach(element => {
this.activeNames.push(
[]
)
});
} else if (this.type == "login") {
// 构建登陆页面
let i18n = this.$i18n.messages[this.$i18n.locale] || {};
let menuData = JSON.parse(JSON.stringify(i18n.nav.loginData));
let list = [];
if (this.userInfo && this.userInfo.name) {
menuData.name = this.userInfo.name;
menuData.list.forEach(element => {
if (element.type == "auth") {
list.push(element);
}
});
} else {
menuData.list.forEach(element => {
if (element.type == "noAuth") {
list.push(element);
}
});
}
// menuData.list = list;
navList = list;
// console.log("navList:", navList);
}
this.navList = navList;
}
},
created() {
this.initData();
},
watch: {
visible(newVal, oldVal) {
this.$nextTick(() => {
this.$refs.panel.scrollTop = 0;
});
},
userInfo(val) {
this.initData();
}
},
};
@import '@/styles/_support.scss';
.panel {
z-index: 9999;
display: block;
left: 0;
top: $navHeight-M;
position: fixed;
width: 100%;
height: 100%;
// background-color: rgba($color: #000000, $alpha: 0.3);
background-color: #ffffff;
overflow: scroll;
padding-bottom: 200px;
// 遮罩
.mask {
width: 100%;
height: 100%;
position: fixed;
z-index: 5000;
left: 0;
top: 0;
}
.list {
position: relative;
z-index: 5001;
padding: 0 20px;
// background-color: #ffffff;
}
// 国际化
.lang {
position: relative;
z-index: 5002;
display: flex;
background-color: #ffffff;
padding: 20px 36px;
&-item {
border-right: solid 1px #ebedf0;
padding: 0 12px;
@extend .fcc;
&:first-child {
padding: 0 10px 0 0;
}
&-act {
color: $cOrange;
}
}
}
}
.coll-item-act {
color: $cOrange;
}
.list-item {
@extend .bb;
display: flex;
align-items: center;
padding: 16px 16px;
position: relative;
border-bottom: 1px solid #ebedf0;
font-size: 14px;
color: $cFontGray;
background-color: #fff;
.txt {
flex: 1;
}
}
.icon-wrap {
@extend .fcc;
height: 100%;
}
.plus-icon {
width: 21px;
height: 21px;
background: url("~@/assets/images/home/icon-head-plus.png") no-repeat center;
@extend .bis;
transform: scale(.6);
}
.arrow-icon {
width: 21px;
height: 21px;
background: url("~@/assets/images/home/icon-head-right-arrow.png") no-repeat center;
@extend .bis;
transform: scale(.6);
}
.plus-icon-act {
background: url("~@/assets/images/home/icon-head-plus-act.png") no-repeat center;
}
.hide {
display: none;
}
.panel::-webkit-scrollbar {
display: none;
}
<template>
<div>
<div ref="panel" class="panel" :class="{'hide':!visible}">
<div class="mask" @click="showDropdownM('')"></div>
<!-- 列表 -->
<div class="list">
<div v-for="(item,index) in navList" :key="item.id" :index="index">
<van-collapse @change="onChangeHandler" v-model="activeNames[index]" v-if="item && item.list && item.list.length > 0">
<van-collapse-item :border="borderBoo" :title="item.name" :name="index">
<div slot="title">
<span :class="{'coll-item-act':index == activeIndex}">{{item.name}}</span>
</div>
<div slot="right-icon">
<div class="icon-wrap">
<div class="plus-icon" :class="{'plus-icon-act':index == activeIndex}"></div>
</div>
</div>
<div @click="onClickHandler(item2)" class="list-item" v-for="item2 in item.list" :key="item2.id">
<div class="arrow-icon"></div>
<div class="txt">{{ item2.name }}</div>
</div>
</van-collapse-item>
</van-collapse>
<div v-else @click="onClickHandler(item)" class="list-item">
{{item.name}}
</div>
</div>
</div>
<!-- 语言 -->
<div v-if="langList && langList.length > 0" class="lang">
<div @click="setLangHandler(item)" class="lang-item pointer" :class="{'lang-item-act':locale==item.value}" v-for="item in langList" :key="item.id">
{{ item.name }}
</div>
</div>
</div>
</div>
</template>
<script src="./m-dropdown.js"></script>
<style lang="scss" scoped>
@import "./m-dropdown.scss";
</style>
/**
* 组件描述:PC顶栏导航下拉菜单
*/
import api from '@/api/api'
import {
httpPost
} from '@/api/fetch-api.js'
export default {
name: "DropDownList",
data() {
return {
activeIndex: 0,
sTitle: this.dataObj && this.dataObj.name || '',
reloadBlackList: [],
listVisible: false,
};
},
props: {
/**
* 导航类型
* nav:普通菜单导航
* login:登陆菜单
* lang:三语切换菜单
*/
type: {
type: String,
default () {
return "nav";
}
},
/**
* 传入菜单完整数据
*/
dataObj: {
type: Object,
default () {
return {};
}
},
/**
* 传入菜单列表
*/
dataList: {
type: Array,
default () {
return [];
}
},
labelProperty: {
type: String,
default () {
return "name";
}
}
},
directives: {
dpl: {
bind(el) {
el.style.display = "none";
}
}
},
methods: {
onNavHandler() {
console.log("this.dataObj:", this.dataObj);
let path = this.dataObj && this.dataObj.path || "";
if (path) {
this.$router.push({
path: path
})
}
},
onOverHandler(event) {
let ul = event.currentTarget.childNodes[1].childNodes[1];
ul.style.display = "block";
this.listVisible = true;
},
onOutHandler(event) {
let ul = event.currentTarget.childNodes[1].childNodes[1];
ul.style.display = "none";
this.listVisible = false;
},
onClickHandler(event, index) {
// 隐藏其他
if (this.$refs.ul) {
this.$refs.ul.style.display = "none";
}
// 选择item
this.activeIndex = index;
let curData = this.dataList[index];
if (this.type == "lang") {
// 如果是语言设置，则设置语言
let lang = curData.value;
if (lang != localStorage.getItem('lang')) {
localStorage.setItem("lang", lang);
if (this.reloadBlackList.indexOf(this.$route.path) >= 0) {
window.location.reload();
} else {
this.$i18n.locale = lang;
this.sTitle = curData.name;
this.$root.eventBus.$emit("langChange");
}
}
} else {
let item = curData;
let path = item && item.path || "";
this.$root.eventBus.$emit(item.path);
if (path) {
// console.log("path:", path);
// modify
if (path == "/custom/service?q=m5") {
path = "/clarms"
}
this.$router.push({
path: path
})
} else {
let value = item && item.value || null;
if (value) {
switch (value) {
case "login":
this.onLoginHandler();
break;
case "logout":
this.logoutHandler();
break;
case "gotoVHIS":
// gotoVHIS(this.$i18n.locale);
this.$router.push({
path: "/vhis"
});
break;
}
}
}
}
},
onLoginHandler() {
this.$root.eventBus.$emit("login");
if (this.$route.name == "login") {
return;
} else if (this.$route.name == "register" || this.$route.name == "passwordFind") {
this.$router.push({
path: "/login"
});
} else {
let callback = this.$route.fullPath;
this.$router.push({
path: "/login?callback=" + callback
});
}
},
logoutHandler() {
this.clearCache();
httpPost({
url: api.logout
}).then(() => {
this.$store.commit("SET_USER_INFO", null);
this.showLogoutTip();
});
},
clearCache() {
for (let index = 0; index < sessionStorage.length; index++) {
let key = sessionStorage.key(index);
console.log(key);
sessionStorage.removeItem(key);
}
},
showLogoutTip() {
// 登出后的提示
// alert("登出成功");
},
updateTitle(name) {
this.sTitle = name || this.sTitle;
}
},
computed: {
dplLable() {
return this.dataList[this.activeIndex][this.labelProperty];
},
locale() {
return this.$i18n.locale || "tc";
},
},
created() {},
};
@import "@/styles/_support.scss";
.drop-list {
display: inline-block;
position: relative;
margin: 0 0px;
font-size: $fontSizeTitle;
.list {
position: absolute;
width: 34px;
left: 0;
right: 0;
margin: 0 auto;
font-size: 16px;
left: 50%;
transform: translateX(-50%); //居中处理
.space {
height: 18px;
}
.triangle-up {
opacity: 0;
margin: 2px auto 0;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 9px solid #f1f2f2;
}
.opacity1{
opacity: 1;
}
}
span {
display: block;
text-align: center;
}
span:hover {
}
ul {
display: none;
overflow: hidden;
border-radius: 5px;
background-color: #f1f2f2;
li {
@extend .fcc;
text-align: center;
position: relative;
height: 28px;
color: $cFontGray2;
&:after {
content: "";
width: 28px;
height: 1px;
background-color: #c5c5c5;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%); //居中处理
}
}
li:last-child {
border-bottom: none;
&:after {
background: transparent;
}
}
li:hover {
color: $cOrange2;
}
.act {
color: $cOrange2;
}
}
}
// .drop-list:lang(en){
// min-width: 0;
// margin: 0 13px;
// }
@media (max-width: 1100px) {
}
@media (max-width: 1000px) {
}
<template>
<div class="drop-list drop-list-lang" @mouseover="onOverHandler($event)" @mouseout="onOutHandler($event)">
<!-- 登陆下拉样式 -->
<span @click="onNavHandler()">
中 | EN
</span>
<div class="list">
<!-- <div class="space"></div> -->
<div class="triangle-up" :class="{'opacity1':listVisible}"></div>
<ul ref="ul">
<li :class="{'act':item.value == locale}" v-for="(item, index) in dataList" :key="index" @mousedown="onClickHandler($event,index)">{{item[labelProperty]}}</li>
</ul>
</div>
</div>
</template>
<script src="./dropdown-lang.js"></script>
<style lang="scss" scoped>
@import "./dropdown-lang.scss";
</style>
/**
* 组件描述:PC顶栏导航下拉菜单
*/
import api from '@/api/api'
import {
httpPost
} from '@/api/fetch-api.js'
export default {
name: "DropDownList",
data() {
return {
activeIndex: 0,
sTitle: this.dataObj && this.dataObj.name || '',
reloadBlackList: []
};
},
props: {
/**
* 导航类型
* nav:普通菜单导航
* login:登陆菜单
* lang:三语切换菜单
*/
type: {
type: String,
default () {
return "nav";
}
},
/**
* 传入菜单完整数据
*/
dataObj: {
type: Object,
default () {
return {};
}
},
/**
* 传入菜单列表
*/
dataList: {
type: Array,
default () {
return [];
}
},
labelProperty: {
type: String,
default () {
return "name";
}
}
},
directives: {
dpl: {
bind(el) {
el.style.display = "none";
}
}
},
methods: {
onNavHandler() {
console.log("this.dataObj:", this.dataObj);
let path = this.dataObj && this.dataObj.path || "";
if (path) {
this.$router.push({
path: path
})
}
},
onOverHandler(event) {
let ul = event.currentTarget.childNodes[1].childNodes[1];
ul.style.display = "block";
},
onOutHandler(event) {
// console.log(event);
let ul = event.currentTarget.childNodes[1].childNodes[1];
ul.style.display = "none";
},
onClickHandler(event, index) {
// 隐藏其他
if (this.$refs.ul) {
this.$refs.ul.style.display = "none";
}
// 选择item
this.activeIndex = index;
let curData = this.dataList[index];
if (this.type == "lang") {
// 如果是语言设置，则设置语言
let lang = curData.value;
if (lang != localStorage.getItem('lang')) {
localStorage.setItem("lang", lang);
if (this.reloadBlackList.indexOf(this.$route.path) >= 0) {
window.location.reload();
} else {
this.$i18n.locale = lang;
this.sTitle = curData.name;
this.$root.eventBus.$emit("langChange");
}
}
} else {
let item = curData;
let path = item && item.path || "";
this.$root.eventBus.$emit(item.path);
if (path) {
// console.log("path:", path);
// modify
if (path == "/custom/service?q=m5") {
path = "/clarms"
}
this.$router.push({
path: path
})
} else {
let value = item && item.value || null;
if (value) {
switch (value) {
case "login":
this.onLoginHandler();
break;
case "logout":
this.logoutHandler();
break;
case "gotoVHIS":
// gotoVHIS(this.$i18n.locale);
this.$router.push({
path: "/vhis"
});
break;
}
}
}
}
},
onLoginHandler() {
this.$root.eventBus.$emit("login");
if (this.$route.name == "login") {
return;
} else if (this.$route.name == "register" || this.$route.name == "passwordFind") {
this.$router.push({
path: "/login"
});
} else {
let callback = this.$route.fullPath;
this.$router.push({
path: "/login?callback=" + callback
});
}
},
logoutHandler() {
this.clearCache();
httpPost({
url: api.logout
}).then(() => {
this.$store.commit("SET_USER_INFO", null);
this.showLogoutTip();
});
},
clearCache() {
for (let index = 0; index < sessionStorage.length; index++) {
let key = sessionStorage.key(index);
console.log(key);
sessionStorage.removeItem(key);
}
},
showLogoutTip() {
// 登出后的提示
// alert("登出成功");
},
updateTitle(name) {
this.sTitle = name || this.sTitle;
}
},
computed: {
dplLable() {
return this.dataList[this.activeIndex][this.labelProperty];
}
},
created() {},
};
@import "@/styles/_support.scss";
.drop-list {
position: relative;
cursor: pointer;
.list {
position: absolute;
width: 132px;
left: 0;
right: 0;
margin: 0 auto;
font-size: $fontSize;
left: 50%;
transform: translateX(-50%); //居中处理
.space {
height: 18px;
}
}
span {
display: block;
text-align: center;
}
span:hover {
}
ul {
display: none;
overflow: hidden;
box-shadow: 0 0 18px 0 rgba(255, 87, 0, 0.15);
border-radius: 6px;
li {
// border-bottom: solid 1px #f1f1f1;
background: #ffffff;
text-align: center;
padding: 18px 0;
position: relative;
&:after {
content: "";
width: 84px;
height: 1px;
background: #f1f1f1;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%); //居中处理
}
}
li:last-child {
border-bottom: none;
&:after {
background: transparent;
}
}
li:hover {
color: $cOrange;
}
}
}
.drop-list:lang(en) {
min-width: 0;
margin: 0 13px;
}
.user {
@include border-tans-rev;
@extend .fcc;
cursor: pointer;
width: 70px;
height: 45px;
border-radius: 22.5px;
span {
max-width: 51px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.icon-img {
margin: 0 6px;
}
}
// 登陆
.login {
}
@media (max-width: 1100px) {
// .drop-list {
// margin: 0 28px;
// min-width: 0;
// }
// .drop-list:lang(en) {
// margin: 0 22px;
// }
}
@media (max-width: 1000px) {
}
<template>
<div class="drop-list" :class="{'login':type=='login'}" @mouseover="onOverHandler($event)" @mouseout="onOutHandler($event)">
<div class="user" @click="onLoginHandler()">
<!-- <img class="icon-img" src="@/assets/images/home/icon-user.png"> -->
<span>{{dataObj.name}}</span>
</div>
<div class="list">
<div class="space"></div>
<ul ref="ul" >
<li v-for="(item, index) in dataList" :key="index" @mousedown="onClickHandler($event,index)">{{item[labelProperty]}}</li>
</ul>
</div>
</div>
</template>
<script src="./dropdown-login.js"></script>
<style lang="scss" scoped>
@import "./dropdown-login.scss";
</style>
......@@ -2,10 +2,11 @@
.drop-list {
display: inline-block;
min-width: 120px;
min-width: 92px;
position: relative;
margin: 0 13.2px;
margin: 0 0px;
font-size: $fontSizeTitle;
// background-color: wheat;
.list {
position: absolute;
......@@ -70,7 +71,7 @@
}
.drop-list:lang(en){
min-width: 0;
margin: 0 32px;
margin: 0 13px;
}
.user {
......@@ -101,13 +102,13 @@
@media (max-width: 1100px) {
.drop-list {
margin: 0 28px;
min-width: 0;
}
.drop-list:lang(en) {
margin: 0 22px;
}
// .drop-list {
// margin: 0 28px;
// min-width: 0;
// }
// .drop-list:lang(en) {
// margin: 0 22px;
// }
}
......
......@@ -15,7 +15,7 @@
</template>
<div class="list">
<div class="space"></div>
<ul ref="ul" v-dpl>
<ul ref="ul" >
<li v-for="(item, index) in dataList" :key="index" @mousedown="onClickHandler($event,index)">{{item[labelProperty]}}</li>
</ul>
</div>
......
......@@ -13,11 +13,17 @@ import {
import VDropdown from '@components/home/dropdown/dropdown.vue'
import MDropdown from '@components/home/m-dropdown/m-dropdown.vue'
// 语言下拉菜单
import DropdownLang from '@components/home/dropdown-lang/dropdown-lang.vue'
import DropdownLogin from '@components/home/dropdown-login/dropdown-login.vue'
export default {
name: 'VHeader',
components: {
VDropdown,
MDropdown
MDropdown,
DropdownLang,
DropdownLogin,
},
computed: {
i18n() {
......
@import '@/styles/_support.scss';
@import "@/styles/_support.scss";
$navHei: 92px;
$navHeiM: 72px;
......@@ -26,7 +26,8 @@ $navHeiM: 72px;
}
.logo-img {
margin-right: 43.2px;
// margin-right: 43.2px;
margin-right: 0;
max-width: 213px;
cursor: pointer;
}
......@@ -51,7 +52,8 @@ $navHeiM: 72px;
}
.main-nav-list {
display: flex;
// display: flex;
@extend .fcc;
cursor: pointer;
}
......@@ -74,8 +76,67 @@ $navHeiM: 72px;
}
}
// PC端导航
.pc {
display: block;
display: flex;
justify-content: space-between;
.main-nav-list {
flex: 1;
}
.main-func {
display: flex;
align-items: center;
font-size: $fontSizeSmall-M2;
// 电话
&-tel {
display: flex;
align-items: center;
font-size: $fontSize-M2;
font-weight: normal;
color: $cOrange2;
img {
margin-right: 2px;
margin-top: 4px;
}
}
// 语言切换
&-lang {
cursor: pointer;
color: $cOrange2;
margin-left: 24px;
}
// 登入
&-login {
// cursor: pointer;
// @include border-tans;
// @extend .fcc;
// width: 69px;
// height: 45px;
// border-radius: 22.5px;
margin-left: 16px;
}
// 报价
&-quote {
cursor: pointer;
@include linear-bg-top;
@extend .fcc;
width: 94px;
height: 45px;
border-radius: 22.5px;
margin-left: 16px;
font-weight: bold;
color: #ffffff;
}
}
}
// 移动端导航
......@@ -95,7 +156,6 @@ $navHeiM: 72px;
margin-left: 20px;
}
}
}
@media (max-width: 1200px) {
......@@ -104,42 +164,37 @@ $navHeiM: 72px;
}
}
@media (max-width: 1100px) {
.v-header {
.logo-img {
margin-right: 24px;
}
}
.pc {
.auth {
margin-right: 20px;
}
.nav-item.auth {
.lang {
min-width: auto;
}
}
}
// .v-header {
// .logo-img {
// }
// }
// .pc {
// .auth {
// margin-right: 20px;
// }
// .nav-item.auth {
// .lang {
// min-width: auto;
// }
// }
// }
}
@media (max-width: 980px) {
@media (max-width: 1020px) {
.v-header {
@include content-percent();
.main-nav {}
.logo-img {
max-width: 213px;
margin: 0;
.main-nav {
}
// .logo-img {
// max-width: 213px;
// margin: 0;
// }
.pc {
display: none;
}
......@@ -156,7 +211,6 @@ $navHeiM: 72px;
@media (max-width: 768px) {
.v-header {
// 原1200px临界样式
.pc {
......
<template>
<header class="v-header">
<div class="header-container">
<img @click="toIndex" src="@/assets/images/home/header-logo.png" alt="中国平安人寿保险" class="logo-img">
<div class="main-nav">
<!-- mobile -->
<div class="nav-list-m mobile">
<div class="mobile-nav-list">
<img @click="onShowDropdown('login')" v-if="!loginMVisible" src="@/assets/images/home/mobile-user.png" alt="">
<img @click="onShowDropdown('')" v-else src="@/assets/images/home/mobile-user.png" alt="">
<img @click="onShowDropdown('nav')" v-if="!dropdownMVisible" src="@/assets/images/home/mobile-nav.png" alt="">
<img @click="onShowDropdown('')" v-else src="@/assets/images/home/mobile-nav-close.png" alt="">
</div>
<m-dropdown class="lang" :type="'nav'" :visible="dropdownMVisible" :show-dropdown-m="onShowDropdown" :lang-list="langData.list" ref="pcMenu"></m-dropdown>
<m-dropdown class="lang" :type="'login'" :visible="loginMVisible" :show-dropdown-m="onShowDropdown"></m-dropdown>
</div>
<!-- pc -->
<div class="nav-list pc">
<div class="main-nav-list">
<v-dropdown v-for="item in navList" :key="item.id" :data-obj="item" :data-list="item.list">
</v-dropdown>
</div>
<div class="nav-item search"></div>
<header class="v-header">
<div class="header-container">
<!-- logo -->
<img @click="toIndex" src="@/assets/images/home/header-logo.png" alt="中国平安人寿保险" class="logo-img">
<div class="main-nav">
<!-- mobile -->
<div class="nav-list-m mobile">
<div class="mobile-nav-list">
<img @click="onShowDropdown('login')" v-if="!loginMVisible" src="@/assets/images/home/mobile-user.png" alt="">
<img @click="onShowDropdown('')" v-else src="@/assets/images/home/mobile-user.png" alt="">
<img @click="onShowDropdown('nav')" v-if="!dropdownMVisible" src="@/assets/images/home/mobile-nav.png" alt="">
<img @click="onShowDropdown('')" v-else src="@/assets/images/home/mobile-nav-close.png" alt="">
</div>
<m-dropdown class="lang" :type="'nav'" :visible="dropdownMVisible" :show-dropdown-m="onShowDropdown" :lang-list="langData.list" ref="pcMenu"></m-dropdown>
<m-dropdown class="lang" :type="'login'" :visible="loginMVisible" :show-dropdown-m="onShowDropdown"></m-dropdown>
</div>
<!-- pc -->
<div class="nav-list pc">
<!-- 导航区 -->
<div class="main-nav-list">
<v-dropdown v-for="item in navList" :key="item.id" :data-obj="item" :data-list="item.list">
</v-dropdown>
</div>
<!-- 功能区 -->
<div class="main-func">
<!-- 电话 -->
<div class="main-func-tel">
<img src="@/assets/images/home/icon-tel.png" alt="">
(852)2983 8866
</div>
<!-- 语言切换 -->
<div class="main-func-lang">
<!-- 中 | EN -->
<dropdown-lang class="lang" :type="'lang'" :data-obj="langData" :data-list="langData.list"></dropdown-lang>
</div>
<!-- 登入 -->
<div class="main-func-login">
<dropdown-login class="lang" :type="'login'" :data-obj="loginData" :data-list="loginData.list" ref="mobileMenu"></dropdown-login>
</div>
<!-- 报价 -->
<div class="main-func-quote">
立即報價
</div>
</div>
<!-- <div class="nav-item search"></div>
<div class="nav-item auth">
<v-dropdown class="lang" :type="'login'" :data-obj="loginData" :data-list="loginData.list" ref="mobileMenu"></v-dropdown>
<v-dropdown class="lang" :type="'lang'" :data-obj="langData" :data-list="langData.list"></v-dropdown>
</div>
</div>
</div> -->
</div>
</div>
</div>
</div>
</header>
</div>
</header>
</template>
<script src="./header.js"></script>
......
......@@ -10,158 +10,178 @@
// 居中按钮样式
@mixin btn-center($width, $height) {
width: $width;
height: $height;
line-height: $height;
text-align: center;
width: $width;
height: $height;
line-height: $height;
text-align: center;
}
// 超过多少行自动省略 默认一行
@mixin ellipsis($line: 1) {
display: -webkit-box;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: $line;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: $line;
overflow: hidden;
text-overflow: ellipsis;
}
// 文字截取
@mixin text-overflow() {
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
word-break: break-all;
word-wrap: normal;
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
word-break: break-all;
word-wrap: normal;
}
@mixin word-break() {
word-break: break-all;
word-wrap: break-word;
white-space: normal;
word-break: break-all;
word-wrap: break-word;
white-space: normal;
}
// No wrap
@mixin no-wrap() {
word-break: normal;
word-wrap: normal;
white-space: nowrap;
word-break: normal;
word-wrap: normal;
white-space: nowrap;
}
// 清除浮动
@mixin clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
// Single side border-radius
@mixin border-top-radius($radius) {
border-top-right-radius: $radius;
border-top-left-radius: $radius;
border-top-right-radius: $radius;
border-top-left-radius: $radius;
}
@mixin border-right-radius($radius) {
border-bottom-right-radius: $radius;
border-top-right-radius: $radius;
border-bottom-right-radius: $radius;
border-top-right-radius: $radius;
}
@mixin border-bottom-radius($radius) {
border-bottom-right-radius: $radius;
border-bottom-left-radius: $radius;
border-bottom-right-radius: $radius;
border-bottom-left-radius: $radius;
}
@mixin border-left-radius($radius) {
border-bottom-left-radius: $radius;
border-top-left-radius: $radius;
border-bottom-left-radius: $radius;
border-top-left-radius: $radius;
}
// Center-align a block level element
@mixin center-block() {
display: block;
margin-left: auto;
margin-right: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
// CSS image replacement
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
@mixin hide-text() {
font-size: 0;
line-height: 0;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
font-size: 0;
line-height: 0;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
// 橙色按钮
@mixin btc2($wid: 63px, $hei: 30px, $fontSize: 12px) {
width: $wid;
height: $hei;
line-height: $hei;
font-size: $fontSize;
border-radius: $hei;
text-align: center;
color: #ffffff;
background-color: #f05a23;
// box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
// background-blend-mode: soft-light, ;
// background-image: linear-gradient(to bottom, #f05f28, #f05021);
box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
background-blend-mode: soft-light;
background-image: linear-gradient(to bottom, #ec6429, #ec6429), linear-gradient(to top, #000000, #ffffff);
// background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
width: $wid;
height: $hei;
line-height: $hei;
font-size: $fontSize;
border-radius: $hei;
text-align: center;
color: #ffffff;
background-color: #f05a23;
// box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
// background-blend-mode: soft-light, ;
// background-image: linear-gradient(to bottom, #f05f28, #f05021);
box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
background-blend-mode: soft-light;
background-image: linear-gradient(to bottom, #ec6429, #ec6429),
linear-gradient(to top, #000000, #ffffff);
// background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
}
@mixin btc3($wid: 63px, $hei: 30px, $fontSize: 12px) {
width: $wid;
height: $hei;
line-height: $hei;
font-size: $fontSize;
border-radius: $hei;
text-align: center;
color: #006441;
border: solid 1px #006441;
width: $wid;
height: $hei;
line-height: $hei;
font-size: $fontSize;
border-radius: $hei;
text-align: center;
color: #006441;
border: solid 1px #006441;
}
@mixin btc4($wid: 288px, $hei: 60px, $fontSize: 18px) {
width: $wid;
height: $hei;
line-height: $hei;
font-size: $fontSize;
border-radius: $hei;
text-align: center;
background-image: linear-gradient(135deg, #f15a08, #feab1b), linear-gradient(90deg, #fff, #fff);
color: white;
font-weight: 600;
cursor: pointer;
letter-spacing: 1.4px;
width: $wid;
height: $hei;
line-height: $hei;
font-size: $fontSize;
border-radius: $hei;
text-align: center;
background-image: linear-gradient(135deg, #f15a08, #feab1b),
linear-gradient(90deg, #fff, #fff);
color: white;
font-weight: 600;
cursor: pointer;
letter-spacing: 1.4px;
}
@mixin content-percent($percent: 4%) {
box-sizing: border-box;
padding: 0 $percent;
box-sizing: border-box;
padding: 0 $percent;
}
@mixin border-tans($borderRadius: 1px, $borderSize: 2px) {
border: $borderSize 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);
border-radius: $borderRadius;
border: $borderSize 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);
border-radius: $borderRadius;
}
@mixin border-tans-rev($borderRadius: 1px, $borderSize: 2px) {
border: $borderSize solid transparent;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(90deg, #fff, #fff),
linear-gradient(90deg, #f15a08, #feab1b);
border-radius: $borderRadius;
}
@mixin linear-bg() {
background-color: transparent;
background-image: linear-gradient(135deg, #f15a08, #feab1b), linear-gradient(90deg, #fff, #fff);
background-color: transparent;
background-image: linear-gradient(135deg, #f15a08, #feab1b),
linear-gradient(90deg, #fff, #fff);
}
@mixin linear-bg-rev() {
background-color: transparent;
background-image: linear-gradient(135deg, #feab1b, #f15a08), linear-gradient(90deg, #fff, #fff);
}
\ No newline at end of file
background-color: transparent;
background-image: linear-gradient(135deg, #feab1b, #f15a08),
linear-gradient(90deg, #fff, #fff);
}
@mixin linear-bg-top() {
background-color: transparent;
background-image: linear-gradient(to top, #feab1b, #f15a08),
linear-gradient(90deg, #fff, #fff);
}
......