<template>
<div class="my-collection-page">
<div class="container">
<div class="placeholder-block"></div>
<div class="my-collection-header">
<div class="header-container">
<div class="go-back" @click="goBack">返回上一页</div>
<div class="generate-collection" @click="showModal">生成作品集</div>
</div>
</div>
<div class="collection-bar">
<img src="~IMAGES/tree/main/collection_bar.png" alt="">
</div>
<div class="nav-container">
<div class="nav-bar">
<div class="collection-left-arrow" @click="leftMove"><img src="~IMAGES/tree/main/collection_left_arrow.png" alt=""></div>
<ul class="item-container" ref="ulRef">
<li v-for="(item, index) in btnList" :key="index" class="every-item">{{item.name}}</li>
</ul>
<div class="collection-right-arrow" @click="rightMove"><img src="~IMAGES/tree/main/collection_right_arrow.png" alt=""></div>
</div>
</div>
</div>
<div class="work-items-container">
<WorksItem></WorksItem>
</div>
<div v-show="showCollectionModal">
<div class="collection-modal-wrapper">
<div class="collection-modal">
<img src="~IMAGES/program/pc_landing/modal_close.png" alt="" class="collection-modal-close" @click="closeCollectionModal">
<div class="collection-container">
<div class="modal-middle-content">
<div class="collection-first-title">生成作品集</div>
<div class="collection-second-title"><span>呵呵呵同学, 扫码领取你的专属作品集 </span><span class="change-name-btn" @click="changeName" v-show="!showInputContainer">更改名字</span></div>
<div class="collection-modal-input" v-show="showInputContainer">
<div class="collection-input">
<input type="text" placeholder="请输入你的姓名" maxlength="5" v-model="keyword">
<div class="commit-btn">提交</div>
</div>
<div class="collection-tip" v-show="showTip">最多输入5个字</div>
</div>
<div class="collection-qrcode-container" v-show="!showInputContainer">
<div class="qrcode-content">
<div class="qrcode-img">
<img src="~IMAGES/tree/main/collection_qrcode.png">
</div>
<div class="qr-cpde-title">关注公众号, 领取作品集</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
發窘收到
</div>
</div>
</template>
<script>
import WorksItem from './components/WorksItem'
import { EventBus } from '../../../util/eventBus'
export default {
name: 'MyCollection',
components: {
WorksItem
},
data () {
return {
showCollectionModal: false,
showInputContainer: false,
showTip: false,
keyword: '',
btnList: [
{
name: '项目一'
},
{
name: '项目二'
},
{
name: '项目三'
},
{
name: '项目四'
},
{
name: '项目五'
},
{
name: '项目六'
}
],
itemIndex: 0
}
},
mounted () {
EventBus.$emit('showRedPop', false)
},
watch: {
keyword (newVal, oldVal) {
console.log(newVal)
if (newVal.length >= 5) {
this.showTip = true
} else {
this.showTip = false
}
}
},
methods: {
goBack () {
this.$router.go(-1)
},
leftMove () {
if (this.itemIndex < 0) {
this.itemIndex += 1
this.$refs.ulRef.scrollLeft -= 290
}
},
rightMove () {
if (this.btnList.length > 3) {
this.itemIndex -= 1
this.$refs.ulRef.scrollLeft += 290
}
},
showModal () {
this.showCollectionModal = true
},
closeCollectionModal () {
this.showCollectionModal = false
},
changeName () {
console.log('更改名字')
this.showInputContainer = true
}
}
}
</script>
<style scoped>
.my-collection-page {
background: #F7FAFB;
width: 100%;
}
.my-collection-page .container {
width: 100%;
background-color: #F7FAFB;
}
.placeholder-block {
height: 98px;
width: 100%;
background: #F7FAFB;
}
.my-collection-header {
height: 98px;
width: 100%;
background: #fff;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
box-shadow: 0 0.21vw 0.46vw 0.06vw rgb(0 0 0 / 2%);
}
.my-collection-header .header-container {
width: 77.2vw;
height: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-container .go-back,.generate-collection {
width: 296px;
height: 63px;
line-height: 63px;
border-radius: 50px;
text-align: center;
cursor: pointer;
letter-spacing: 2px;
}
.go-back {
border: 1px solid #25CFBB;
color: #25CFBB;
}
.generate-collection {
background: #FF955B;
color: #fff;
}
.collection-bar {
width: 77.2vw;
margin: 0 auto;
}
.collection-bar>img {
width: 100%;
object-fit: contain;
}
.nav-container {
height: 89px;
margin: 0 auto;
}
.nav-bar {
width: 1000px;
margin: 0 auto;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.item-container {
flex: 1;
flex-shrink: 0;
list-style: none;
display: flex;
justify-content: space-between;
padding: 0;
width: 876px;
overflow-x: hidden;
box-sizing: border-box;
}
.collection-left-arrow, .collection-right-arrow {
width: 36px;
height: 36px;
cursor: pointer;
}
.collection-left-arrow {
margin-right: 20px;
}
.collection-right-arrow {
margin-left: 16px;
}
.item-container .every-item {
height: 43px;
line-height: 43px;
width: 272px;
text-align: center;
border: 1px solid #25CFBB;
border-radius: 50px;
margin-right: 35px;
color: #25CFBB;
cursor: pointer;
flex-shrink: 0;
}
.item-container .every-item:last-child {
margin-right: 0;
}
.every-item:last-child {
margin-right: 0;
}
.work-items-container {
width: 77.2vw;
height: 100%;
margin: 0 auto;
}
.collection-modal-wrapper {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 999;
}
.collection-modal {
position: absolute;
left: 50%;
top: 50%;
z-index: 444;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: #fff;
border-radius: 10px;
background-size: cover;
height: 54vh;
width: 42vw;
}
.collection-modal-close {
position: absolute;
color: #333;
height: 18px;
width: 18px;
top: 20px;
right: 20px;
cursor: pointer;
}
.collection-container {
margin-top: 8vh;
text-align: center;
}
.collection-modal-input {
display: flex;
margin: 0 auto;
flex-direction: column;
max-width: 100%;
margin-top: 10vh;
align-items: center;
position: relative;
align-items: flex-start;
}
.collection-first-title {
font-size: 4vh;
color: #181052;
font-weight: bold;
letter-spacing: 2px;
}
.collection-second-title {
height: 5vh;
line-height: 5vh;
font-size: 3vh;
color: #181052;
margin-top: 2vh;
box-sizing: border-box;
}
.collection-input {
margin: 0 auto;
display: flex;
flex-wrap: nowrap;
}
.collection-input input {
height: 5.5vh;
line-height: 5.5vh;
width: 15.8vw;
padding-left: 0.4vw;
outline: none;
border: 1px solid #269686;
box-sizing: border-box;
border-top-left-radius: 1vh;
border-bottom-left-radius: 1vh;
font-size: 1.8vh;
}
.commit-btn {
height: 5.5vh;
width: 5vw;
line-height: 5.5vh;
background: #269686;
cursor: pointer;
color: #fff;
border-top-right-radius: 1vh;
border-bottom-right-radius: 1vh;
font-size: 1.8vh;
letter-spacing: .2vw;
}
.collection-tip {
margin: 0 auto;
color: #787878;
font-size: .2vh;
width: 20vw;
text-align: left;
margin-top: .5vh;
}
.change-name-btn {
display: inline-block;
height: 3.5vh;
width: 5vw;
background: #269686;
box-sizing: border-box;
line-height: 3.5vh;
text-align: center;
position: relative;
top: -0.5vh;
color: #fff;
cursor: pointer;
font-size: 1.5vh;
margin-bottom: .2vh;
box-shadow: 0px 4px 6px rgba(24, 23, 23, .2);
}
.collection-qrcode-container {
margin-top: 4vh;
}
.qrcode-content {
height: 30vh;
}
.qrcode-img {
height: 22vh;
width: 22vh;
background: #E0E0E0;
line-height: 22vh;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
border-radius: 1vh;
}
.qrcode-content img {
width: 20vh;
height: 20vh;
object-fit: contain;
}
.qr-cpde-title {
margin-top: 1vh;
color: #8A8A8A;
letter-spacing: .2vh;
font-size: 1.8vh;
}
</style>
