|
@@ -1,365 +0,0 @@
|
|
-<template>
|
|
|
|
- <div class="page">
|
|
|
|
- <div class="page-top">
|
|
|
|
- <img class="logo" src="~/assets/theme-images/ross/ross-logo.png" />
|
|
|
|
- <span></span>
|
|
|
|
- <div class="name mt-2">来自西班牙殿堂级创新技术</div>
|
|
|
|
- </div>
|
|
|
|
- <div class="page-content">
|
|
|
|
- <keep-alive>
|
|
|
|
- <div class="list">
|
|
|
|
- <div
|
|
|
|
- class="section flex flex-col justify-center items-center"
|
|
|
|
- v-for="item in list"
|
|
|
|
- :key="item.id"
|
|
|
|
- @click="toDetail(item)"
|
|
|
|
- @mouseover="onMouseover(item)"
|
|
|
|
- @mouseleave="onMouselevel(item)"
|
|
|
|
- >
|
|
|
|
- <div class="icon-image" :class="'item' + item.id"></div>
|
|
|
|
- <div class="name mt-4" v-text="item.name"></div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </keep-alive>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
-</template>
|
|
|
|
-
|
|
|
|
-<script>
|
|
|
|
-import { mapGetters } from 'vuex'
|
|
|
|
-import { toAuthorization } from '~/utils'
|
|
|
|
-import { isWeChat } from '~/utils/validator'
|
|
|
|
-export default {
|
|
|
|
- name: 'RossHomePage',
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- list: [],
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- computed: {
|
|
|
|
- ...mapGetters([
|
|
|
|
- 'supplierInfo',
|
|
|
|
- 'authUserId',
|
|
|
|
- 'appId',
|
|
|
|
- 'routePrefix',
|
|
|
|
- 'accountType',
|
|
|
|
- ]),
|
|
|
|
- },
|
|
|
|
- created() {
|
|
|
|
- this.initEntryItems()
|
|
|
|
- },
|
|
|
|
- beforeDestroy() {
|
|
|
|
- this.$removeStorage(this.routePrefix, 'login_redicret')
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- // 初始化入口图标
|
|
|
|
- initEntryItems() {
|
|
|
|
- this.list = [
|
|
|
|
- {
|
|
|
|
- id: 0,
|
|
|
|
- name: '正品授权申请入口',
|
|
|
|
- path: '/form/club-register',
|
|
|
|
- active: false,
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- id: 1,
|
|
|
|
- name: '正品授权',
|
|
|
|
- path: '/approve',
|
|
|
|
- active: false,
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- id: 2,
|
|
|
|
- name: '资料库',
|
|
|
|
- path: '/database/article',
|
|
|
|
- active: false,
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- id: 3,
|
|
|
|
- name: '意见反馈',
|
|
|
|
- path: '/feedback',
|
|
|
|
- active: false,
|
|
|
|
- },
|
|
|
|
- ]
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- toDetail(item) {
|
|
|
|
- const hasLogin = this.$store.getters.accessToken
|
|
|
|
- // 保存登录重定向路由
|
|
|
|
- this.$setStorage(
|
|
|
|
- this.routePrefix,
|
|
|
|
- 'login_redicret',
|
|
|
|
- this.routePrefix + item.path
|
|
|
|
- )
|
|
|
|
- if (item.id > 1 && !hasLogin) {
|
|
|
|
- // 在微信浏览器中使用微信授权登录
|
|
|
|
- if (isWeChat() && this.appId && this.accountType === 2) {
|
|
|
|
- const payload = {
|
|
|
|
- authUserId: this.authUserId,
|
|
|
|
- routePrefix: this.routePrefix,
|
|
|
|
- }
|
|
|
|
- return toAuthorization(this.appId, payload)
|
|
|
|
- }
|
|
|
|
- this.$toast({ message: '请先登录', duration: 1000 })
|
|
|
|
- this.$store.commit('app/SHOW_LOGIN')
|
|
|
|
- return
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- if (item.id === 0) {
|
|
|
|
- const url = this.routePrefix + item.path
|
|
|
|
- this.$router.push(url)
|
|
|
|
- } else {
|
|
|
|
- const url = this.routePrefix + item.path
|
|
|
|
- this.$router.push(url)
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- onMouseover(item) {
|
|
|
|
- const isPc = this.$store.getters.isPc
|
|
|
|
- if (!isPc) return
|
|
|
|
- item.active = true
|
|
|
|
- },
|
|
|
|
- onMouselevel(item) {
|
|
|
|
- const isPc = this.$store.getters.isPc
|
|
|
|
- if (!isPc) return
|
|
|
|
- item.active = false
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
-}
|
|
|
|
-</script>
|
|
|
|
-
|
|
|
|
-<style scoped lang="scss">
|
|
|
|
-// pc 端
|
|
|
|
-@media screen and (min-width: 768px) {
|
|
|
|
- .page {
|
|
|
|
- min-height: calc(100vh - 160px);
|
|
|
|
- @include themify($themes) {
|
|
|
|
- background-size: auto 100%;
|
|
|
|
- background: themed('pc-banner-home') no-repeat center;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .page-top {
|
|
|
|
- width: 1200px;
|
|
|
|
- margin: 0 auto;
|
|
|
|
- padding: 75px 0 129px;
|
|
|
|
- .logo {
|
|
|
|
- display: block;
|
|
|
|
- width: 119px;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- span {
|
|
|
|
- display: block;
|
|
|
|
- width: 46px;
|
|
|
|
- height: 3px;
|
|
|
|
- margin: 40px 0 32px;
|
|
|
|
- @include themify($themes) {
|
|
|
|
- background: themed('color');
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .name {
|
|
|
|
- color: #fff;
|
|
|
|
- font-size: 34px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .page-content {
|
|
|
|
- width: 1200px;
|
|
|
|
- margin: 0 auto;
|
|
|
|
-
|
|
|
|
- .list {
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: space-between;
|
|
|
|
- align-items: center;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .section {
|
|
|
|
- width: 284px;
|
|
|
|
- height: 260px;
|
|
|
|
- margin-left: auto;
|
|
|
|
- margin-right: auto;
|
|
|
|
- background: rgba(255, 255, 255, 0.69);
|
|
|
|
- cursor: pointer;
|
|
|
|
- border-radius: 4px;
|
|
|
|
- transition: all 0.4s;
|
|
|
|
-
|
|
|
|
- &:hover {
|
|
|
|
- transform: translateY(-10px);
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- &:nth-child(2n-1) {
|
|
|
|
- transform: translateY(60px);
|
|
|
|
-
|
|
|
|
- &:hover {
|
|
|
|
- transform: translateY(50px);
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .icon-image {
|
|
|
|
- width: 86px;
|
|
|
|
- height: 86px;
|
|
|
|
- background-size: 86px 86px;
|
|
|
|
- background-repeat: no-repeat;
|
|
|
|
- background-position: center;
|
|
|
|
-
|
|
|
|
- &.item0 {
|
|
|
|
- @include themify($themes) {
|
|
|
|
- background-image: themed('pc-icon-home-edit');
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- &.item1 {
|
|
|
|
- @include themify($themes) {
|
|
|
|
- background-image: themed('pc-icon-home-approve');
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- &.item2 {
|
|
|
|
- @include themify($themes) {
|
|
|
|
- background-image: themed('pc-icon-home-doc');
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- &.item3 {
|
|
|
|
- @include themify($themes) {
|
|
|
|
- background-image: themed('pc-icon-home-feedback');
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- &:hover {
|
|
|
|
- @include themify($themes) {
|
|
|
|
- background: url(~assets/theme-images/ross/pc-icon-approve-hover.png)
|
|
|
|
- no-repeat center;
|
|
|
|
- background-size: 100% auto;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .icon-image {
|
|
|
|
- &.item0 {
|
|
|
|
- background-image: url(~assets/theme-images/common/pc-icon-edit-active.png) !important;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- &.item1 {
|
|
|
|
- background-image: url(~assets/theme-images/common/pc-icon-approve-active.png) !important;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- &.item2 {
|
|
|
|
- background-image: url(~assets/theme-images/common/pc-icon-doc-active.png) !important;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- &.item3 {
|
|
|
|
- background-image: url(~assets/theme-images/common/pc-icon-feedback-active.png) !important;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .name {
|
|
|
|
- color: #fff;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .icon {
|
|
|
|
- width: 86px;
|
|
|
|
- height: 86px;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .name {
|
|
|
|
- font-size: 24px;
|
|
|
|
- color: #404040;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-// 移动 端
|
|
|
|
-@media screen and (max-width: 768px) {
|
|
|
|
- .page {
|
|
|
|
- min-height: calc(100vh - 12.8vw - 12.4vw);
|
|
|
|
- padding-bottom: 16vw;
|
|
|
|
- @include themify($themes) {
|
|
|
|
- background: themed('h5-banner-home') no-repeat center;
|
|
|
|
- background-size: cover;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .page-top {
|
|
|
|
- padding: 11.5vw 7.2vw 15.5vw;
|
|
|
|
- .logo {
|
|
|
|
- display: block;
|
|
|
|
- width: 14.3vw;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- span {
|
|
|
|
- display: block;
|
|
|
|
- width: 7.2vw;
|
|
|
|
- height: 0.5vw;
|
|
|
|
- background: #fff;
|
|
|
|
- margin: 6.2vw 0 4vw;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .name {
|
|
|
|
- font-size: 4.8vw;
|
|
|
|
- color: #fff;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .page-content {
|
|
|
|
- .list {
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: space-between;
|
|
|
|
- flex-wrap: wrap;
|
|
|
|
- padding: 0 7.2vw;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .section {
|
|
|
|
- width: 41vw;
|
|
|
|
- height: 38vw;
|
|
|
|
- box-shadow: 0px 0.4vw 2vw rgba(0, 6, 32, 0.08);
|
|
|
|
- margin-bottom: 8.8vw;
|
|
|
|
- border-radius: 4px;
|
|
|
|
-
|
|
|
|
- &:nth-child(2n-1) {
|
|
|
|
- transform: translateY(16vw);
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .icon {
|
|
|
|
- width: 16vw;
|
|
|
|
- height: 16vw;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .name {
|
|
|
|
- font-size: 4vw;
|
|
|
|
- color: #fff;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .icon-image {
|
|
|
|
- width: 16vw;
|
|
|
|
- height: 16vw;
|
|
|
|
- background-size: 16vw 16vw;
|
|
|
|
- background-repeat: no-repeat;
|
|
|
|
- background-position: center;
|
|
|
|
-
|
|
|
|
- &.item0 {
|
|
|
|
- background-image: url(~assets/theme-images/common/pc-icon-edit-active.png) !important;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- &.item1 {
|
|
|
|
- background-image: url(~assets/theme-images/common/pc-icon-approve-active.png) !important;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- &.item2 {
|
|
|
|
- background-image: url(~assets/theme-images/common/pc-icon-doc-active.png) !important;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- &.item3 {
|
|
|
|
- background-image: url(~assets/theme-images/common/pc-icon-feedback-active.png) !important;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- @include themify($themes) {
|
|
|
|
- background: url(~assets/theme-images/ross/h5-icon-approve-hover.png)
|
|
|
|
- no-repeat center;
|
|
|
|
- background-size: 100% auto;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-</style>
|
|
|