|
|
@@ -0,0 +1,319 @@
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <div class="top">
|
|
|
+ <el-radio-group class="menu" v-model="type" size="normal">
|
|
|
+ <el-radio-button v-for="(item, index) in typeList" :key="index" :label="item.value">
|
|
|
+ <div class="radio-item">
|
|
|
+ <i class="font_family" :class="[item.icon]"></i>
|
|
|
+ <span>{{ item.label }}</span>
|
|
|
+ </div>
|
|
|
+ </el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+ <div class="search-list">
|
|
|
+ <el-input
|
|
|
+ class="search"
|
|
|
+ prefix-icon="el-icon-search"
|
|
|
+ placeholder="请输入您想找到的作品名称…"
|
|
|
+ v-model="search"
|
|
|
+ clearable
|
|
|
+ @change="onSearch"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="border" style="margin: 30px 0"></div>
|
|
|
+
|
|
|
+ <div class="list" v-loading="fetchingData">
|
|
|
+ <collection-info v-for="(item, index) in list" :key="item.id" :info.sync="list[index]"></collection-info>
|
|
|
+
|
|
|
+ <el-empty v-if="empty" description="还没有该类型的藏品哦~"></el-empty>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="pagination-wrapper">
|
|
|
+ <el-pagination
|
|
|
+ @size-change="onSizeChange"
|
|
|
+ @current-change="onCurrentChange"
|
|
|
+ :current-page="page"
|
|
|
+ :page-sizes="[10, 20, 30, 40, 50]"
|
|
|
+ :page-size="pageSize"
|
|
|
+ layout="total, prev, pager, next"
|
|
|
+ :total="totalElements"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import CollectionInfo from '../../components/CollectionInfo.vue';
|
|
|
+import pageableTable from '../../mixins/pageableTable';
|
|
|
+export default {
|
|
|
+ components: { CollectionInfo },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ typeList: [
|
|
|
+ {
|
|
|
+ label: '全部',
|
|
|
+ value: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '藏品类',
|
|
|
+ value: 'DEFAULT'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '盲盒类',
|
|
|
+ value: 'BLIND_BOX'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ search: '',
|
|
|
+ type: '',
|
|
|
+ url: '/collection/all',
|
|
|
+ list: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mixins: [pageableTable],
|
|
|
+ watch: {
|
|
|
+ type() {
|
|
|
+ this.$router
|
|
|
+ .replace({
|
|
|
+ query: {
|
|
|
+ ...this.$route.query,
|
|
|
+ type: this.type
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ this.getData();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ beforeGetData() {
|
|
|
+ return {
|
|
|
+ search: this.search,
|
|
|
+ query: {
|
|
|
+ type: this.type
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ setList(list) {
|
|
|
+ this.list = list;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.search {
|
|
|
+ background: #1a1a1a;
|
|
|
+ width: 280px;
|
|
|
+ height: 42px;
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+ /deep/.el-input__inner {
|
|
|
+ border: 1px solid #898989;
|
|
|
+ background-color: transparent;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ &:focus {
|
|
|
+ border-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.top {
|
|
|
+ .flex();
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.border {
|
|
|
+ height: 1px;
|
|
|
+ background: #494a4d;
|
|
|
+ border-radius: 1px;
|
|
|
+}
|
|
|
+.container {
|
|
|
+ padding: 30px 16px;
|
|
|
+ .title {
|
|
|
+ height: 42px;
|
|
|
+ font-size: 32px;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 42px;
|
|
|
+ padding: 60px 0;
|
|
|
+ font-family: ZhenyanGB;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ width: 276px;
|
|
|
+ .line(@radius:8px);
|
|
|
+ display: inline-block;
|
|
|
+ margin: 16px;
|
|
|
+ .imgBox {
|
|
|
+ height: 160px;
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 8px 8px 0px 0px;
|
|
|
+ }
|
|
|
+ .img {
|
|
|
+ padding: 5px;
|
|
|
+ width: 88px;
|
|
|
+ height: 88px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 65px;
|
|
|
+ position: absolute;
|
|
|
+ top: 100px;
|
|
|
+ right: 90px;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .name {
|
|
|
+ height: 24px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-top: 50px;
|
|
|
+ padding-right: 6px;
|
|
|
+ &.name1 {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #949699;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .img1 {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ margin-top: 50px;
|
|
|
+ &.img2 {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .introduce {
|
|
|
+ margin: 10px 16px 16px;
|
|
|
+ height: 60px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 20px;
|
|
|
+ .ellipsis-line(3);
|
|
|
+ }
|
|
|
+ .fans {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 10px 16px 20px;
|
|
|
+ .followers {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .text3 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .text4 {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .follow {
|
|
|
+ width: 70px;
|
|
|
+ height: 26px;
|
|
|
+ color: #00ffcb;
|
|
|
+ font-size: 14px;
|
|
|
+ border-radius: 16px;
|
|
|
+ border: 1px solid;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 26px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.menu {
|
|
|
+ .el-radio-button__inner {
|
|
|
+ border-color: #949699;
|
|
|
+ background-color: transparent;
|
|
|
+ color: #949699;
|
|
|
+ width: 140px;
|
|
|
+ }
|
|
|
+ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
|
|
+ // background: linear-gradient(41deg, #fdfb60 0%, #ff8f3e 100%);
|
|
|
+ background: linear-gradient(46deg, #00ffcb 0%, #006eff 100%);
|
|
|
+ color: #fff;
|
|
|
+ border-color: #fff;
|
|
|
+ }
|
|
|
+ .el-radio-button {
|
|
|
+ &:last-child {
|
|
|
+ .el-radio-button__inner {
|
|
|
+ border-radius: 0 8px 8px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:first-child {
|
|
|
+ .el-radio-button__inner {
|
|
|
+ border-radius: 8px 0 0 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.list {
|
|
|
+ margin: -16px -16px;
|
|
|
+ min-height: 800px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .content {
|
|
|
+ margin: 16px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.radio-item {
|
|
|
+ .flex();
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 16px;
|
|
|
+
|
|
|
+ .font_family {
|
|
|
+ font-size: 20px;
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.pagination-wrapper {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 80px auto;
|
|
|
+
|
|
|
+ /deep/.el-pagination {
|
|
|
+ button:disabled {
|
|
|
+ background-color: transparent;
|
|
|
+ color: #939599;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-next,
|
|
|
+ .btn-prev {
|
|
|
+ background: transparent;
|
|
|
+ color: #939599;
|
|
|
+ }
|
|
|
+ .el-pager li {
|
|
|
+ background-color: transparent;
|
|
|
+ color: #939599;
|
|
|
+ &.active {
|
|
|
+ color: @prim;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.search-list {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .select {
|
|
|
+ /deep/.el-input__inner {
|
|
|
+ background-color: transparent;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|