|
|
@@ -1,60 +1,20 @@
|
|
|
<template>
|
|
|
<div class="container">
|
|
|
- <div class="topBox1">
|
|
|
- <img class="topBox" src="../assets/矩形@3x (1).png" alt="" />
|
|
|
- <div class="header center-content">
|
|
|
- <!-- <router-link class="logo-link" :to="{ path: '/' }"> -->
|
|
|
- <img class="logo" src="../assets/nav_logo@3x (1).png" alt="" />
|
|
|
- <div class="content">
|
|
|
- <el-tabs v-model="activeName" class="menus" @tab-click="change">
|
|
|
- <el-tab-pane
|
|
|
- v-for="(item, index) in menus"
|
|
|
- :key="index"
|
|
|
- :label="item.label"
|
|
|
- :name="item.value"
|
|
|
- ></el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
- <div class="btn-list" v-if="isLogin">
|
|
|
- <el-dropdown @command="onCommand" style="margin-left: 20px">
|
|
|
- <span class="el-dropdown-link">
|
|
|
- <img style="margin-top: 8px" class="img" :src="avatarBox" />
|
|
|
- </span>
|
|
|
- <el-dropdown-menu slot="dropdown">
|
|
|
- <el-dropdown-item command="nickname" style="word-break: keep-all"
|
|
|
- >{{ userInfo.nickname }}
|
|
|
- </el-dropdown-item>
|
|
|
- <div class="border"></div>
|
|
|
- <el-dropdown-item
|
|
|
- v-if="userInfo.authStatus != 'SUCCESS'"
|
|
|
- command="supply"
|
|
|
- style="word-break: keep-all"
|
|
|
- >去认证
|
|
|
- </el-dropdown-item>
|
|
|
- <el-dropdown-item command="edit" style="word-break: keep-all"
|
|
|
- >编辑资料
|
|
|
- </el-dropdown-item>
|
|
|
- <div class="border"></div>
|
|
|
- <el-dropdown-item command="logout">退出登录 </el-dropdown-item>
|
|
|
- </el-dropdown-menu>
|
|
|
- </el-dropdown>
|
|
|
- </div>
|
|
|
- <el-button v-else class="login" plain @click="Login">[登录]</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <img class="topBox" src="../assets/矩形@3x (1).png" alt="" />
|
|
|
|
|
|
- <div class="top center-content">
|
|
|
- <div>
|
|
|
- <div class="title1">嗨! 我们是第九空间</div>
|
|
|
- <div class="title2">全球领先的游戏数字藏品NFT集结地</div>
|
|
|
- <div class="btnCon" @click="$router.push('/collection')"><span>立即探索</span></div>
|
|
|
- </div>
|
|
|
- <div class="back">
|
|
|
- <swiper class="mySwiper imgBox" ref="mySwiper" :options="swiperOptions">
|
|
|
- <swiper-slide>
|
|
|
- <el-image :src="getImg(banners[0].pic, '', 800)" style="width: 500px; height: 500px" />
|
|
|
- </swiper-slide>
|
|
|
- </swiper>
|
|
|
- </div>
|
|
|
+ <div class="top center-content">
|
|
|
+ <div>
|
|
|
+ <div class="title1">嗨! 我们是第九空间</div>
|
|
|
+ <div class="title2">全球领先的游戏数字藏品NFT集结地</div>
|
|
|
+ <div class="btnCon" @click="$router.push('/collection')"><span>立即探索</span></div>
|
|
|
+ </div>
|
|
|
+ <div class="back">
|
|
|
+ <!-- <swiper class="mySwiper imgBoxBack" ref="mySwiper" :options="swiperOptions">
|
|
|
+ <swiper-slide>
|
|
|
+ <el-image :src="getImg(banners[0].pic, '', 800)" />
|
|
|
+ </swiper-slide>
|
|
|
+ </swiper> -->
|
|
|
+ <img class="el-image" src="../assets/bg@3x.png" alt="" />
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -166,19 +126,16 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <login-info ref="ref" @close="show = false"></login-info>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import CollectionInfo from '../components/CollectionInfo.vue';
|
|
|
import MoreTitle from '../components/MoreTitle.vue';
|
|
|
-import LoginInfo from '../components/LoginInfo.vue';
|
|
|
import pageableTable from '@/mixins/pageableTable';
|
|
|
-import { mapState, mapMutations } from 'vuex';
|
|
|
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
|
|
|
import 'swiper/css/swiper.css';
|
|
|
export default {
|
|
|
- components: { CollectionInfo, MoreTitle, Swiper, SwiperSlide, LoginInfo },
|
|
|
+ components: { CollectionInfo, MoreTitle, Swiper, SwiperSlide },
|
|
|
mixins: [pageableTable],
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -197,51 +154,10 @@ export default {
|
|
|
active: '',
|
|
|
show: false,
|
|
|
activeName: '',
|
|
|
- lists: '',
|
|
|
- url: '/identityAuth/all',
|
|
|
- menus: [
|
|
|
- {
|
|
|
- label: '铸造者',
|
|
|
- value: '/casting'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '收藏探索',
|
|
|
- value: '/collection'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '数字盲盒',
|
|
|
- value: '/collection?type=BLIND_BOX'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '我的藏品',
|
|
|
- value: '/my'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '了解更多',
|
|
|
- value: 'wait'
|
|
|
- }
|
|
|
- ]
|
|
|
+ lists: ''
|
|
|
};
|
|
|
},
|
|
|
- computed: {
|
|
|
- ...mapState(['userInfo']),
|
|
|
- avatarBox() {
|
|
|
- return this.userInfo.avatar;
|
|
|
- }
|
|
|
- },
|
|
|
mounted() {
|
|
|
- this.$EventBus.$on('login', () => {
|
|
|
- this.Login();
|
|
|
- });
|
|
|
- this.getActive();
|
|
|
- if (this.isLogin) {
|
|
|
- if (this.userInfo.authStatus !== 'NOT_AUTH') {
|
|
|
- setTimeout(() => {
|
|
|
- this.add();
|
|
|
- }, 1000);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
this.getCreators();
|
|
|
this.getProduct().then(res => {
|
|
|
this.products = res;
|
|
|
@@ -260,169 +176,25 @@ export default {
|
|
|
.then(res => {
|
|
|
this.bannersList = res.content;
|
|
|
});
|
|
|
- this.$http
|
|
|
- .post(
|
|
|
- '/banner/all',
|
|
|
- {
|
|
|
- query: {
|
|
|
- del: false,
|
|
|
- type: null
|
|
|
- }
|
|
|
- },
|
|
|
- { body: 'json' }
|
|
|
- )
|
|
|
- .then(res => {
|
|
|
- console.log(res);
|
|
|
+ // this.$http
|
|
|
+ // .post(
|
|
|
+ // '/banner/all',
|
|
|
+ // {
|
|
|
+ // query: {
|
|
|
+ // del: false,
|
|
|
+ // type: null
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // { body: 'json' }
|
|
|
+ // )
|
|
|
+ // .then(res => {
|
|
|
|
|
|
- this.banners = res.content.filter(item => {
|
|
|
- return item.name === '首页大图';
|
|
|
- });
|
|
|
- });
|
|
|
+ // this.banners = res.content.filter(item => {
|
|
|
+ // return item.name === '首页大图';
|
|
|
+ // });
|
|
|
+ // });
|
|
|
},
|
|
|
methods: {
|
|
|
- add() {
|
|
|
- this.$http
|
|
|
- .post(
|
|
|
- '/identityAuth/all',
|
|
|
- {
|
|
|
- query: {
|
|
|
- userId: this.userInfo.id
|
|
|
- },
|
|
|
- sort: 'createdAt,desc',
|
|
|
- size: 1,
|
|
|
- page: 0
|
|
|
- },
|
|
|
- {
|
|
|
- body: 'json'
|
|
|
- }
|
|
|
- )
|
|
|
- .then(res => {
|
|
|
- this.lists = res.content[0].org;
|
|
|
- console.log(this.lists);
|
|
|
- });
|
|
|
- },
|
|
|
- Login() {
|
|
|
- this.$refs.ref.flag();
|
|
|
- },
|
|
|
- ...mapMutations(['updateUserInfo']),
|
|
|
- batchRead() {},
|
|
|
- onCommand(command) {
|
|
|
- if (command === 'edit') {
|
|
|
- this.$router.push('/accountdata');
|
|
|
- } else if (command === 'nickname') {
|
|
|
- this.$router.push('/accountdata');
|
|
|
- } else if (command === 'logout') {
|
|
|
- localStorage.removeItem('webToken');
|
|
|
- this.updateUserInfo(null);
|
|
|
- this.$router.push('/');
|
|
|
- } else if (command === 'supply') {
|
|
|
- this.add();
|
|
|
- if (this.userInfo.authStatus === 'NOT_AUTH') {
|
|
|
- this.$router.push('/authentication');
|
|
|
- } else {
|
|
|
- this.$nextTick(() => {
|
|
|
- console.log(this.lists);
|
|
|
- setTimeout(() => {
|
|
|
- if (this.userInfo.authStatus !== 'NOT_AUTH' && this.lists == false) {
|
|
|
- this.add();
|
|
|
- this.$router.push('/userauthentication');
|
|
|
- }
|
|
|
- }, 1000);
|
|
|
- setTimeout(() => {
|
|
|
- if (this.userInfo.authStatus !== 'NOT_AUTH' && this.lists == true) {
|
|
|
- this.add();
|
|
|
- this.$router.push('/enterpriseauthentication');
|
|
|
- }
|
|
|
- }, 1000);
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- getActive() {
|
|
|
- this.activeName = '';
|
|
|
- let menus = [...this.menus];
|
|
|
- menus.forEach(item => {
|
|
|
- let _route = this.parsePath(item.value);
|
|
|
- if (this.$route.path == _route.path && Object.keys(_route.query).length === 0) {
|
|
|
- this.activeName = item.value;
|
|
|
- } else if (this.$route.path == _route.path) {
|
|
|
- Object.keys(_route.query).forEach(key => {
|
|
|
- if (_route.query[key] === this.$route.query[key]) {
|
|
|
- this.activeName = item.value;
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- change(info) {
|
|
|
- if (info.paneName !== 'wait') {
|
|
|
- window.scrollTo({
|
|
|
- top: 0,
|
|
|
- behavior: 'smooth'
|
|
|
- });
|
|
|
- this.$router.push(info.paneName);
|
|
|
- } else {
|
|
|
- this.wait();
|
|
|
- }
|
|
|
- },
|
|
|
- parsePath(path = '') {
|
|
|
- let hash = '';
|
|
|
- let query = {};
|
|
|
-
|
|
|
- let hashIndex = path.indexOf('#');
|
|
|
- if (hashIndex >= 0) {
|
|
|
- hash = path.slice(hashIndex);
|
|
|
- path = path.slice(0, hashIndex);
|
|
|
- }
|
|
|
-
|
|
|
- let queryIndex = path.indexOf('?');
|
|
|
- if (queryIndex >= 0) {
|
|
|
- query = this.parseQuery(path.slice(queryIndex + 1));
|
|
|
- path = path.slice(0, queryIndex);
|
|
|
- }
|
|
|
-
|
|
|
- return {
|
|
|
- path,
|
|
|
- query,
|
|
|
- hash
|
|
|
- };
|
|
|
- },
|
|
|
- parseQuery(query) {
|
|
|
- const res = {};
|
|
|
- console.log(query);
|
|
|
- query = query.trim().replace(/^(\?|#|&)/, '');
|
|
|
-
|
|
|
- if (!query) {
|
|
|
- return res;
|
|
|
- }
|
|
|
-
|
|
|
- query.split('&').forEach(param => {
|
|
|
- const parts = param.replace(/\+/g, ' ').split('=');
|
|
|
- const key = decode(parts.shift());
|
|
|
- const val = parts.length > 0 ? decode(parts.join('=')) : null;
|
|
|
-
|
|
|
- if (res[key] === undefined) {
|
|
|
- res[key] = val;
|
|
|
- } else if (Array.isArray(res[key])) {
|
|
|
- res[key].push(val);
|
|
|
- } else {
|
|
|
- res[key] = [res[key], val];
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- function decode(str = '') {
|
|
|
- try {
|
|
|
- return decodeURIComponent(str);
|
|
|
- } catch (err) {
|
|
|
- if (process.env.NODE_ENV !== 'production') {
|
|
|
- // warn(false, `Error decoding "${str}". Leaving it intact.`)
|
|
|
- }
|
|
|
- }
|
|
|
- return str;
|
|
|
- }
|
|
|
-
|
|
|
- return res;
|
|
|
- },
|
|
|
getCreators() {
|
|
|
this.$http
|
|
|
.post(
|
|
|
@@ -480,9 +252,6 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
- $route() {
|
|
|
- this.getActive();
|
|
|
- },
|
|
|
initChange() {
|
|
|
if (this.initChange) {
|
|
|
if (this.timer) {
|
|
|
@@ -497,139 +266,9 @@ export default {
|
|
|
<style lang="less" scoped>
|
|
|
.topBox {
|
|
|
width: 100%;
|
|
|
- height: 550px;
|
|
|
-}
|
|
|
-/deep/.btn-list {
|
|
|
- .el-tabs__nav-scroll {
|
|
|
- padding-left: 13px;
|
|
|
- }
|
|
|
- .el-tabs__item {
|
|
|
- font-weight: bold;
|
|
|
- font-size: 14px;
|
|
|
- width: 300px;
|
|
|
- }
|
|
|
-}
|
|
|
-/deep/ .el-dropdown-menu__item {
|
|
|
- font-weight: bold;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-/deep/.menus {
|
|
|
- // padding: 22px 25px 0px;
|
|
|
- padding: 22px 25px 0px;
|
|
|
- .el-tabs__item {
|
|
|
- padding: 0 25px;
|
|
|
- color: #ffffff;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 400;
|
|
|
- &.is-active {
|
|
|
- color: #fff;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- &:focus {
|
|
|
- &.is-active.is-focus {
|
|
|
- box-shadow: none;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .el-tabs__nav-wrap {
|
|
|
- &::after {
|
|
|
- background-color: transparent;
|
|
|
- }
|
|
|
- }
|
|
|
- .el-tabs__active-bar {
|
|
|
- background-color: transparent;
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- left: 30%;
|
|
|
- right: 30%;
|
|
|
- background-color: #fff;
|
|
|
- top: 0;
|
|
|
- bottom: 0;
|
|
|
- }
|
|
|
- }
|
|
|
+ height: 460px;
|
|
|
}
|
|
|
.container {
|
|
|
- .header {
|
|
|
- background: transparent;
|
|
|
- z-index: 188;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- margin: 0 auto;
|
|
|
- width: 1300px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- .logo {
|
|
|
- width: 130px;
|
|
|
- height: 50px;
|
|
|
- }
|
|
|
- .logo-link {
|
|
|
- padding: 15px 0px 15px 0px;
|
|
|
- }
|
|
|
- .content {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- z-index: 88;
|
|
|
- background: transparent;
|
|
|
- position: relative;
|
|
|
- .tabs {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding-top: 10px;
|
|
|
- cursor: pointer;
|
|
|
- .tab {
|
|
|
- width: 130px;
|
|
|
- font-size: 18px;
|
|
|
- font-weight: bold;
|
|
|
- text-align: center;
|
|
|
- color: #939599;
|
|
|
- line-height: 28px;
|
|
|
- &.active {
|
|
|
- color: #ffffff;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .slip {
|
|
|
- width: 26px;
|
|
|
- margin: 0 auto;
|
|
|
- padding-bottom: 13px;
|
|
|
- &.active {
|
|
|
- border-bottom: 2px solid #fff;
|
|
|
- border-radius: 2px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .btn-list {
|
|
|
- .img {
|
|
|
- width: 34px;
|
|
|
- height: 34px;
|
|
|
- border-radius: 50%;
|
|
|
- display: block;
|
|
|
- border: 2px solid #fff;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .login {
|
|
|
- width: 80px;
|
|
|
- height: 28px;
|
|
|
- line-height: 0px;
|
|
|
- margin-top: 7px;
|
|
|
- border-radius: 4px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #ffffff;
|
|
|
- background: transparent;
|
|
|
- border: 1px solid #ffffff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
.top {
|
|
|
display: flex;
|
|
|
position: absolute;
|
|
|
@@ -641,27 +280,36 @@ export default {
|
|
|
z-index: 88;
|
|
|
justify-content: space-between;
|
|
|
.back {
|
|
|
- border-radius: 16px;
|
|
|
- margin-right: 110px;
|
|
|
- .mySwiper {
|
|
|
- width: 500px;
|
|
|
- height: 500px;
|
|
|
+ .el-image {
|
|
|
+ width: 745px;
|
|
|
+ height: 460px;
|
|
|
display: inline-block;
|
|
|
position: absolute;
|
|
|
- top: 120px;
|
|
|
- right: 150px;
|
|
|
- // .line();
|
|
|
- /deep/.el-image {
|
|
|
- display: block;
|
|
|
- width: 500px !important;
|
|
|
- height: 500px !important;
|
|
|
- border-radius: 8px !important;
|
|
|
- // margin-left: 1px;
|
|
|
- img {
|
|
|
- display: block;
|
|
|
- }
|
|
|
- }
|
|
|
+ top: 90px;
|
|
|
+ right: -199px;
|
|
|
}
|
|
|
+ // margin-right: 110px;
|
|
|
+ // .mySwiper {
|
|
|
+ // width: 745px;
|
|
|
+ // height: 460px;
|
|
|
+ // display: inline-block;
|
|
|
+ // position: absolute;
|
|
|
+ // top: 90px;
|
|
|
+ // right: -198px;
|
|
|
+ // .imgBoxBack {
|
|
|
+ // border-radius: 0px;
|
|
|
+ // }
|
|
|
+ // /deep/.el-image {
|
|
|
+ // display: block;
|
|
|
+ // width: 745px !important;
|
|
|
+ // height: 460px !important;
|
|
|
+ // border-radius: 0px !important;
|
|
|
+ // // margin-left: 1px;
|
|
|
+ // img {
|
|
|
+ // display: block;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
}
|
|
|
.title {
|
|
|
height: 42px;
|
|
|
@@ -769,7 +417,7 @@ export default {
|
|
|
color: #ffffff;
|
|
|
line-height: 34px;
|
|
|
font-family: ZhenyanGB-Regular, ZhenyanGB;
|
|
|
- padding: 121px 0 40px 0;
|
|
|
+ padding: 80px 0 40px;
|
|
|
}
|
|
|
.content {
|
|
|
background: #0f1111;
|
