You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
3.2 KiB
142 lines
3.2 KiB
<template>
|
|
<view class="cardHeader">
|
|
<view class="flex">
|
|
<image src="../static/images/logo.png" mode="" class="logo"></image>
|
|
<view class="title">IPPSWAP</view>
|
|
</view>
|
|
<view class="lang" @click="showLang">
|
|
<text class="lang-text">
|
|
{{langTrue=='English'?'EN':'CN'}}
|
|
</text>
|
|
</view>
|
|
<view class="select-con" v-show="isShowLang">
|
|
<view class="item" v-for="(item, index) in languageData" :key="index" @click="changeLanguage(item,index)"
|
|
:style="{color:index==current?'#fff':''}">
|
|
{{ item.title }}
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import languageData from '@/utils/language/config'
|
|
export default {
|
|
name: 'Header',
|
|
props: {
|
|
title: {
|
|
type: String | Number,
|
|
default () {
|
|
return ''
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
current: uni.getStorageSync('current') || 0,
|
|
isShowLang: false,
|
|
i: 1,
|
|
languageData,
|
|
language: languageData[0].language || 'zh_TW',
|
|
langTrue: languageData[0].title || '繁体中文',
|
|
}
|
|
},
|
|
mounted() {
|
|
if (uni.getStorageSync('langTrue')) {
|
|
this.langTrue = uni.getStorageSync('langTrue')
|
|
this.language = this._i18n.locale
|
|
}
|
|
},
|
|
methods: {
|
|
changeLanguage(e, i) {
|
|
const index = i || 0
|
|
this.current = i
|
|
const current = this.languageData[index]
|
|
this._i18n.locale = current.language
|
|
this.$store.commit('setLanguage', current.language)
|
|
this.langTrue = current.title
|
|
uni.setStorageSync('langTrue', current.title)
|
|
uni.setStorageSync('current', this.current)
|
|
this.isShowLang = false
|
|
this.i++
|
|
window.location.href=''
|
|
},
|
|
showLang() {
|
|
this.i++
|
|
if (this.i % 2 == 0) {
|
|
this.isShowLang = true
|
|
} else {
|
|
this.isShowLang = false
|
|
}
|
|
},
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.select-con {
|
|
position: absolute;
|
|
right: 32rpx;
|
|
top: 105rpx;
|
|
z-index: 10;
|
|
background: url('../static/images/Union.png') no-repeat;
|
|
background-size: cover;
|
|
color: rgba(167, 181, 229, 1);
|
|
width: 176rpx;
|
|
height: 178rpx;
|
|
padding: 40rpx 30rpx;
|
|
|
|
.item:last-child {
|
|
margin-top: 30rpx;
|
|
}
|
|
}
|
|
|
|
.cardHeader {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
height: 106rpx;
|
|
padding: 20rpx 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: radial-gradient(104.53% 5436.39% at -4.53% 16.35%, #7F97EC 3.77%, #8D6CEA 11.22%, #5944D7 24.63%, #2D2EA8 36.47%, #182390 63.92%, #16228E 100%)
|
|
/* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
|
|
;
|
|
|
|
.logo {
|
|
width: 62rpx;
|
|
height: 58rpx;
|
|
}
|
|
|
|
.title {
|
|
height: 100%;
|
|
font-size: 40rpx;
|
|
display: table;
|
|
color: #fff;
|
|
margin-left: 24rpx;
|
|
}
|
|
|
|
.lang {
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
font-weight: 700;
|
|
width: 66rpx;
|
|
height: 66rpx;
|
|
line-height: 60rpx;
|
|
border: 2rpx solid transparent;
|
|
border-radius: 12rpx;
|
|
background-clip: padding-box, border-box;
|
|
background-origin: padding-box, border-box;
|
|
background-image: linear-gradient(180deg, #222794 25%, #592A86 77.78%), linear-gradient(to right, rgba(230, 232, 156, 1), rgba(247, 135, 171, 1));
|
|
|
|
.lang-text {
|
|
background: linear-gradient(to bottom, rgba(230, 232, 156, 1), rgba(247, 135, 171, 1));
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|