|
|
@@ -64,17 +64,17 @@
|
|
|
</div>
|
|
|
<div class="des">
|
|
|
<span>
|
|
|
- {{ t('newSignin.item12') }}
|
|
|
- </span><br />
|
|
|
+ {{ t('newSignin.item12') }} </span
|
|
|
+ ><br />
|
|
|
<span>
|
|
|
- {{ t('newSignin.item12_1') }}
|
|
|
- </span><br />
|
|
|
+ {{ t('newSignin.item12_1') }} </span
|
|
|
+ ><br />
|
|
|
<span>
|
|
|
- {{ t('newSignin.item10') }}
|
|
|
- </span><br />
|
|
|
+ {{ t('newSignin.item10') }} </span
|
|
|
+ ><br />
|
|
|
<span>
|
|
|
- {{ t('newSignin.item11') }}
|
|
|
- </span><br />
|
|
|
+ {{ t('newSignin.item11') }} </span
|
|
|
+ ><br />
|
|
|
<span>{{ t('newSignin.item13') }}</span>
|
|
|
<a
|
|
|
:href="`https://www.${ho}.com/doc/Risk-Disclosures-and-Acknowledgements-2020-08.pdf`"
|
|
|
@@ -97,417 +97,389 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, computed, onMounted, inject } from 'vue'
|
|
|
-import { useRoute } from 'vue-router'
|
|
|
-import { useI18n } from 'vue-i18n'
|
|
|
-import { ArrowDown } from '@element-plus/icons-vue'
|
|
|
-import axios from 'axios'
|
|
|
-import Loop from './Loop.vue'
|
|
|
-import Service from '@/service/login'
|
|
|
-import Config from '@/config/index'
|
|
|
-import { useStore } from 'vuex'
|
|
|
-
|
|
|
-const { t, locale } = useI18n()
|
|
|
-const route = useRoute()
|
|
|
-const { Code } = Config
|
|
|
-const store = useStore()
|
|
|
-
|
|
|
-// 注入reload方法（如果有）
|
|
|
-const reload = inject('reload')
|
|
|
-const Session = inject('session')
|
|
|
-const pigeon = inject('pigeon')
|
|
|
-
|
|
|
-// 响应式数据
|
|
|
-const ho = ref('')
|
|
|
-const language = ref('')
|
|
|
-
|
|
|
-// 语言配置数据
|
|
|
-const langList = ref({
|
|
|
- en: { name: 'ENGLISH', flag: '/src/assets/images/lang_EN.jpg' },
|
|
|
- cn: { name: '中文简体', flag: '/src/assets/images/lang_CN.jpg' },
|
|
|
- zhHant: { name: '中文繁体', flag: '/src/assets/images/lang_CN.jpg' },
|
|
|
- vn: { name: 'Tiếng Việt', flag: '/src/assets/images/lang_VN.jpg' },
|
|
|
- de: { name: 'Deutsch', flag: '/src/assets/images/lang_DE.jpg' },
|
|
|
- es: { name: 'Español', flag: '/src/assets/images/lang_ES.jpg' },
|
|
|
- id: { name: 'Indonesian', flag: '/src/assets/images/lang_Indonesian.jpg' },
|
|
|
- ms: { name: 'Melayu', flag: '/src/assets/images/lang_MS.jpg' },
|
|
|
- th: { name: 'ภาษาไทย', flag: '/src/assets/images/lang_TH.jpg' },
|
|
|
- ar: { name: 'العربية', flag: '/src/assets/images/lang_AR.jpg' },
|
|
|
- ko: { name: '한국어', flag: '/src/assets/images/lang_ko.png' },
|
|
|
- pt: { name: 'Português', flag: '/src/assets/images/lang_PT.png' },
|
|
|
- fa: { name: 'زبان پارسی', flag: '/src/assets/images/lang_FA.png' },
|
|
|
- tr: { name: 'Türkçe', flag: '/src/assets/images/lang_TR.png' },
|
|
|
-})
|
|
|
-
|
|
|
-// 计算当前国旗图标
|
|
|
-const currentFlag = computed(() => {
|
|
|
- const lang = langList.value[language.value]
|
|
|
- return lang ? lang.flag : '/src/assets/images/lang_EN.jpg'
|
|
|
-})
|
|
|
-
|
|
|
-// 语言选项数组（用于v-for）
|
|
|
-const languageOptions = computed(() => {
|
|
|
- return Object.entries(langList.value).map(([code, lang]) => ({
|
|
|
- code,
|
|
|
- name: lang.name,
|
|
|
- flag: lang.flag,
|
|
|
- }))
|
|
|
-})
|
|
|
-console.log(languageOptions.value)
|
|
|
-
|
|
|
-// 方法
|
|
|
-const chooseLang = async (key) => {
|
|
|
- if (key !== language.value) {
|
|
|
- // await switchLanguage(key)
|
|
|
- locale.value = key
|
|
|
- language.value = key
|
|
|
- Session.Set('lang', key)
|
|
|
- axios.defaults.headers.common['Language'] = sessionStorage.getItem(
|
|
|
- 'lang',
|
|
|
- )
|
|
|
- setTimeout(() => {
|
|
|
- // 使用注入的reload方法或刷新页面
|
|
|
- if (reload) {
|
|
|
- reload()
|
|
|
- } else {
|
|
|
- // 如果没有注入reload方法，可以手动刷新或更新组件
|
|
|
- window.location.reload()
|
|
|
- }
|
|
|
- })
|
|
|
+ import { ref, computed, onMounted, inject } from 'vue'
|
|
|
+ import { useRoute } from 'vue-router'
|
|
|
+ import { useI18n } from 'vue-i18n'
|
|
|
+ import { ArrowDown } from '@element-plus/icons-vue'
|
|
|
+ import axios from 'axios'
|
|
|
+ import Loop from './Loop.vue'
|
|
|
+ import Service from '@/service/login'
|
|
|
+ import Config from '@/config/index'
|
|
|
+ import { useStore } from 'vuex'
|
|
|
+ import { langList, languageOptions } from '@/utils/const/langues'
|
|
|
+
|
|
|
+ const { t, locale } = useI18n()
|
|
|
+ const route = useRoute()
|
|
|
+ const { Code } = Config
|
|
|
+ const store = useStore()
|
|
|
+
|
|
|
+ // 注入reload方法（如果有）
|
|
|
+ const reload = inject('reload')
|
|
|
+ const Session = inject('session')
|
|
|
+ const pigeon = inject('pigeon')
|
|
|
+
|
|
|
+ // 响应式数据
|
|
|
+ const ho = ref('')
|
|
|
+ const language = ref('')
|
|
|
+
|
|
|
+ // 计算当前国旗图标
|
|
|
+ const currentFlag = computed(() => {
|
|
|
+ const lang = langList[language.value]
|
|
|
+ return lang ? lang.flag : '/src/assets/images/lang_EN.jpg'
|
|
|
+ })
|
|
|
+ console.log(languageOptions)
|
|
|
+
|
|
|
+ // 方法
|
|
|
+ const chooseLang = async (key) => {
|
|
|
+ if (key !== language.value) {
|
|
|
+ // await switchLanguage(key)
|
|
|
+ locale.value = key
|
|
|
+ language.value = key
|
|
|
+ Session.Set('lang', key)
|
|
|
+ axios.defaults.headers.common['Language'] = sessionStorage.getItem('lang')
|
|
|
+ setTimeout(() => {
|
|
|
+ // 使用注入的reload方法或刷新页面
|
|
|
+ if (reload) {
|
|
|
+ reload()
|
|
|
+ } else {
|
|
|
+ // 如果没有注入reload方法，可以手动刷新或更新组件
|
|
|
+ window.location.reload()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-const getCountryCode = async () => {
|
|
|
- try {
|
|
|
- const res = await Service.CodeById({})
|
|
|
- if (res.code === Code.StatusOK) {
|
|
|
- let lang = 'en'
|
|
|
-
|
|
|
- switch (res.msg) {
|
|
|
- case 'CN':
|
|
|
- lang = 'cn'
|
|
|
- break
|
|
|
- case 'VN':
|
|
|
- lang = 'vn'
|
|
|
- break
|
|
|
- default:
|
|
|
- lang = 'en'
|
|
|
- }
|
|
|
|
|
|
- setLanguage(lang)
|
|
|
+ const getCountryCode = async () => {
|
|
|
+ try {
|
|
|
+ const res = await Service.CodeById({})
|
|
|
+ if (res.code === Code.StatusOK) {
|
|
|
+ let lang = 'en'
|
|
|
+
|
|
|
+ switch (res.msg) {
|
|
|
+ case 'CN':
|
|
|
+ lang = 'cn'
|
|
|
+ break
|
|
|
+ case 'VN':
|
|
|
+ lang = 'vn'
|
|
|
+ break
|
|
|
+ default:
|
|
|
+ lang = 'en'
|
|
|
+ }
|
|
|
+
|
|
|
+ setLanguage(lang)
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取国家编码失败:', error)
|
|
|
+ setLanguage('en')
|
|
|
}
|
|
|
- } catch (error) {
|
|
|
- console.error('获取国家编码失败:', error)
|
|
|
- setLanguage('en')
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-const switchLanguage = async (lang) => {
|
|
|
- try {
|
|
|
- await Service.switchLanguage({ lang })
|
|
|
- } catch (error) {
|
|
|
- console.error('切换语言失败:', error)
|
|
|
+ const switchLanguage = async (lang) => {
|
|
|
+ try {
|
|
|
+ await Service.switchLanguage({ lang })
|
|
|
+ } catch (error) {
|
|
|
+ console.error('切换语言失败:', error)
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-const setLanguage = (lang) => {
|
|
|
- locale.value = lang
|
|
|
- language.value = lang
|
|
|
- Session.Set('lang', lang)
|
|
|
- axios.defaults.headers.common['Language'] = sessionStorage.getItem("lang")
|
|
|
+ const setLanguage = (lang) => {
|
|
|
+ locale.value = lang
|
|
|
+ language.value = lang
|
|
|
+ Session.Set('lang', lang)
|
|
|
+ axios.defaults.headers.common['Language'] = sessionStorage.getItem('lang')
|
|
|
|
|
|
- if (reload) {
|
|
|
- reload()
|
|
|
+ if (reload) {
|
|
|
+ reload()
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-const toHome = () => {
|
|
|
- // 如果有store，可以这样使用
|
|
|
- store.commit("isActiveTab", "0")
|
|
|
-}
|
|
|
+ const toHome = () => {
|
|
|
+ // 如果有store，可以这样使用
|
|
|
+ store.commit('isActiveTab', '0')
|
|
|
+ }
|
|
|
|
|
|
-// 初始化
|
|
|
-onMounted(() => {
|
|
|
- ho.value = window.location.host.split('.')[1] || ''
|
|
|
+ // 初始化
|
|
|
+ onMounted(() => {
|
|
|
+ ho.value = window.location.host.split('.')[1] || ''
|
|
|
|
|
|
- // 处理电子邮件广告参数
|
|
|
- if (route.query.emailAdvertisement && !sessionStorage.getItem('lang')) {
|
|
|
- setLanguage('cn')
|
|
|
- }
|
|
|
+ // 处理电子邮件广告参数
|
|
|
+ if (route.query.emailAdvertisement && !sessionStorage.getItem('lang')) {
|
|
|
+ setLanguage('cn')
|
|
|
+ }
|
|
|
|
|
|
- // 从存储中恢复语言设置
|
|
|
- const savedLang = localStorage.getItem('lang')
|
|
|
- if (savedLang) {
|
|
|
- setLanguage(savedLang)
|
|
|
- } else {
|
|
|
- language.value = locale.value
|
|
|
- Session.Set('lang', locale.value)
|
|
|
- axios.defaults.headers.common['Language'] = sessionStorage.getItem("lang")
|
|
|
- // getLanguage()
|
|
|
- }
|
|
|
-})
|
|
|
+ // 从存储中恢复语言设置
|
|
|
+ const savedLang = localStorage.getItem('lang')
|
|
|
+ if (savedLang) {
|
|
|
+ setLanguage(savedLang)
|
|
|
+ } else {
|
|
|
+ language.value = locale.value
|
|
|
+ Session.Set('lang', locale.value)
|
|
|
+ axios.defaults.headers.common['Language'] = sessionStorage.getItem('lang')
|
|
|
+ // getLanguage()
|
|
|
+ }
|
|
|
+ })
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-#user {
|
|
|
- height: 100%;
|
|
|
- @include font_gray_1();
|
|
|
- background-image: url(../../../assets/images/login-bg.gif);
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: cover;
|
|
|
- background-position: center center;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- flex-wrap: wrap;
|
|
|
- overflow-y: scroll;
|
|
|
-
|
|
|
- &:before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- width: 100%;
|
|
|
+ #user {
|
|
|
height: 100%;
|
|
|
- z-index: 0;
|
|
|
- background-color: #000000;
|
|
|
- opacity: 0.6;
|
|
|
- }
|
|
|
+ @include font_gray_1();
|
|
|
+ background-image: url(../../../assets/images/login-bg.gif);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center center;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ overflow-y: scroll;
|
|
|
|
|
|
- .section-common {
|
|
|
- // height: 100%;
|
|
|
- }
|
|
|
+ &:before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 0;
|
|
|
+ background-color: #000000;
|
|
|
+ opacity: 0.6;
|
|
|
+ }
|
|
|
|
|
|
- .section-top {
|
|
|
- width: 100%;
|
|
|
- position: relative;
|
|
|
- z-index: 1;
|
|
|
+ .section-common {
|
|
|
+ // height: 100%;
|
|
|
+ }
|
|
|
|
|
|
- .bar {
|
|
|
+ .section-top {
|
|
|
+ width: 100%;
|
|
|
position: relative;
|
|
|
z-index: 1;
|
|
|
- padding: 20px 100px;
|
|
|
- box-sizing: border-box;
|
|
|
|
|
|
- .language {
|
|
|
- display: flex;
|
|
|
- justify-content: end;
|
|
|
- align-items: center;
|
|
|
+ .bar {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ padding: 20px 100px;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- .language-selector {
|
|
|
+ .language {
|
|
|
display: flex;
|
|
|
+ justify-content: end;
|
|
|
align-items: center;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- .flag-icon {
|
|
|
- width: 15px;
|
|
|
- height: 10px;
|
|
|
- margin: 0 4px;
|
|
|
- object-fit: cover;
|
|
|
- }
|
|
|
|
|
|
- .menu {
|
|
|
- cursor: pointer;
|
|
|
- color: #fff;
|
|
|
+ .language-selector {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
|
|
|
- .el-icon {
|
|
|
- margin-left: 4px;
|
|
|
+ .flag-icon {
|
|
|
+ width: 15px;
|
|
|
+ height: 10px;
|
|
|
+ margin: 0 4px;
|
|
|
+ object-fit: cover;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .rbt-separator {
|
|
|
- position: relative;
|
|
|
- padding: 0 20px;
|
|
|
-
|
|
|
- &::after {
|
|
|
- position: absolute;
|
|
|
- content: '';
|
|
|
- height: 20px;
|
|
|
- width: 1px;
|
|
|
- background: #fff;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
- .social-share-transparent {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: flex-end;
|
|
|
- margin: -10px;
|
|
|
+ .menu {
|
|
|
+ cursor: pointer;
|
|
|
+ color: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- li {
|
|
|
- margin: 0;
|
|
|
- position: relative;
|
|
|
+ .el-icon {
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- a {
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- border-radius: 100%;
|
|
|
+ .rbt-separator {
|
|
|
position: relative;
|
|
|
- z-index: 1;
|
|
|
+ padding: 0 20px;
|
|
|
|
|
|
- &:hover::before {
|
|
|
- opacity: 1;
|
|
|
- transform: scale(1);
|
|
|
- }
|
|
|
-
|
|
|
- &::before {
|
|
|
- background: #f6f6f6;
|
|
|
+ &::after {
|
|
|
position: absolute;
|
|
|
content: '';
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- opacity: 0;
|
|
|
- transform: scale(0.8);
|
|
|
- border-radius: 100%;
|
|
|
- z-index: -1;
|
|
|
- transition: all 0.3s ease;
|
|
|
+ height: 20px;
|
|
|
+ width: 1px;
|
|
|
+ background: #fff;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- &:hover {
|
|
|
- color: #e61f1e;
|
|
|
+ .social-share-transparent {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin: -10px;
|
|
|
+
|
|
|
+ li {
|
|
|
+ margin: 0;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
- .el-icon {
|
|
|
- font-size: 16px;
|
|
|
+ a {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ border-radius: 100%;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+
|
|
|
+ &:hover::before {
|
|
|
+ opacity: 1;
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ background: #f6f6f6;
|
|
|
+ position: absolute;
|
|
|
+ content: '';
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ opacity: 0;
|
|
|
+ transform: scale(0.8);
|
|
|
+ border-radius: 100%;
|
|
|
+ z-index: -1;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: #e61f1e;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-icon {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .section-bottom {
|
|
|
- max-width: 1320px;
|
|
|
- min-height: calc(100% - 54px);
|
|
|
- position: relative;
|
|
|
- z-index: 1;
|
|
|
- flex: auto;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- }
|
|
|
+ .section-bottom {
|
|
|
+ max-width: 1320px;
|
|
|
+ min-height: calc(100% - 54px);
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ flex: auto;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
|
|
|
- .section-left {
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ .section-left {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .des {
|
|
|
- text-align: start;
|
|
|
- line-height: 20px;
|
|
|
- color: #fff;
|
|
|
- font-size: 12px;
|
|
|
- margin-top: 30px;
|
|
|
+ .des {
|
|
|
+ text-align: start;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-top: 30px;
|
|
|
|
|
|
- a {
|
|
|
- color: #e61f1e;
|
|
|
+ a {
|
|
|
+ color: #e61f1e;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .section-right {
|
|
|
- box-sizing: border-box;
|
|
|
- overflow: auto;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
+ .section-right {
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: auto;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
|
|
|
- .language-dropdown {
|
|
|
- position: sticky;
|
|
|
- top: 50px;
|
|
|
- max-height: calc(100vh - 80px);
|
|
|
- overflow-y: auto;
|
|
|
- scrollbar-width: none;
|
|
|
+ .language-dropdown {
|
|
|
+ position: sticky;
|
|
|
+ top: 50px;
|
|
|
+ max-height: calc(100vh - 80px);
|
|
|
+ overflow-y: auto;
|
|
|
+ scrollbar-width: none;
|
|
|
|
|
|
- &::-webkit-scrollbar {
|
|
|
- display: none;
|
|
|
- }
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
|
|
|
- .language-option {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 8px;
|
|
|
+ .language-option {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
|
|
|
- .flag-icon-small {
|
|
|
- width: 20px !important;
|
|
|
- height: 14px;
|
|
|
- object-fit: cover;
|
|
|
- border-radius: 2px;
|
|
|
+ .flag-icon-small {
|
|
|
+ width: 20px !important;
|
|
|
+ height: 14px;
|
|
|
+ object-fit: cover;
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .el-dropdown-item.is-active {
|
|
|
- background-color: #f5f7fa;
|
|
|
- color: #409eff;
|
|
|
+ .el-dropdown-item.is-active {
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ color: #409eff;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-@media screen and (max-width: 768px) {
|
|
|
- #user {
|
|
|
- height: 100%;
|
|
|
- overflow-y: auto;
|
|
|
+ @media screen and (max-width: 768px) {
|
|
|
+ #user {
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
|
|
|
- .section-top {
|
|
|
- height: 54px;
|
|
|
+ .section-top {
|
|
|
+ height: 54px;
|
|
|
|
|
|
- .bar {
|
|
|
- padding: 20px;
|
|
|
+ .bar {
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .section-bottom {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
+ .section-bottom {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
|
|
|
- .section-left {
|
|
|
- display: none;
|
|
|
- }
|
|
|
+ .section-left {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
|
|
|
- .section-right {
|
|
|
- height: auto;
|
|
|
- width: 100%;
|
|
|
- padding-top: 48px;
|
|
|
- overflow: hidden;
|
|
|
- background-color: #fff;
|
|
|
+ .section-right {
|
|
|
+ height: auto;
|
|
|
+ width: 100%;
|
|
|
+ padding-top: 48px;
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-@media screen and (max-width: 768px) {
|
|
|
- #user .el-carousel__indicators {
|
|
|
- transform: initial;
|
|
|
- left: 48px !important;
|
|
|
- bottom: 48px;
|
|
|
- }
|
|
|
+ @media screen and (max-width: 768px) {
|
|
|
+ #user .el-carousel__indicators {
|
|
|
+ transform: initial;
|
|
|
+ left: 48px !important;
|
|
|
+ bottom: 48px;
|
|
|
+ }
|
|
|
|
|
|
- #user .el-carousel__button {
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- border-radius: 8px;
|
|
|
- @include bg_gray_1();
|
|
|
- }
|
|
|
+ #user .el-carousel__button {
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ border-radius: 8px;
|
|
|
+ @include bg_gray_1();
|
|
|
+ }
|
|
|
|
|
|
- #user .is-active > .el-carousel__button {
|
|
|
- width: 20px;
|
|
|
- @include bg_main();
|
|
|
+ #user .is-active > .el-carousel__button {
|
|
|
+ width: 20px;
|
|
|
+ @include bg_main();
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-:deep(.el-dropdown-menu__item:not(.is-disabled):hover) {
|
|
|
- background-color: #fdecee;
|
|
|
- color: #ef6579
|
|
|
-}
|
|
|
+ :deep(.el-dropdown-menu__item:not(.is-disabled):hover) {
|
|
|
+ background-color: #fdecee;
|
|
|
+ color: #ef6579;
|
|
|
+ }
|
|
|
</style>
|
ljc