|
@@ -6,16 +6,25 @@
|
|
|
<div class="title">
|
|
|
<span>典藏</span>
|
|
|
</div>
|
|
|
- <div class="list">
|
|
|
- <div :class="['item1','item',{'cur':cur==0}]" @mouseover="open(0)" @mouseout="close()" @click="toType('boutique')">
|
|
|
- <p class="Ztit">精 品 典 藏</p>
|
|
|
- <p class="Etit">BOUTIQUE COLLECTION</p>
|
|
|
+ <div class="list">
|
|
|
+ <div
|
|
|
+ :class="['item1', 'item', { cur: cur == 0 }]"
|
|
|
+ @mouseover="open(0)"
|
|
|
+ @mouseout="close()"
|
|
|
+ @click="toType('boutique')"
|
|
|
+ >
|
|
|
+ <p class="Ztit">精 品 典 藏</p>
|
|
|
+ <p class="Etit">BOUTIQUE COLLECTION</p>
|
|
|
</div>
|
|
|
- <div :class="['item2','item',{'cur':cur==1}]" @mouseover="open(1)" @mouseout="close()" @click="toType('threeDimensional')">
|
|
|
+ <div
|
|
|
+ :class="['item2', 'item', { cur: cur == 1 }]"
|
|
|
+ @mouseover="open(1)"
|
|
|
+ @mouseout="close()"
|
|
|
+ @click="toType('threeDimensional')"
|
|
|
+ >
|
|
|
<p class="Ztit">三 维 藏 品</p>
|
|
|
- <p class="Etit">3D COLLECTION</p>
|
|
|
+ <p class="Etit">3D COLLECTION</p>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -32,7 +41,7 @@ export default {
|
|
|
data () {
|
|
|
// 这里存放数据
|
|
|
return {
|
|
|
- cur:-1,
|
|
|
+ cur: -1,
|
|
|
select: '',
|
|
|
boutiqueHover: false,
|
|
|
threeDimensionalHover: false
|
|
@@ -44,11 +53,11 @@ export default {
|
|
|
watch: {},
|
|
|
// 方法集合
|
|
|
methods: {
|
|
|
- open(num) {
|
|
|
- this.cur = num;
|
|
|
+ open (num) {
|
|
|
+ this.cur = num
|
|
|
},
|
|
|
- close() {
|
|
|
- this.cur = -1;
|
|
|
+ close () {
|
|
|
+ this.cur = -1
|
|
|
},
|
|
|
toType (type) {
|
|
|
this.$router.push({ path: '/collection-type', query: { type } })
|
|
@@ -107,36 +116,38 @@ export default {
|
|
|
z-index: -1;
|
|
|
}
|
|
|
.content {
|
|
|
- width:100%;
|
|
|
- margin:0 auto;
|
|
|
- .title {
|
|
|
- width:100%;
|
|
|
- text-align:center;
|
|
|
- margin:107px auto 80px;
|
|
|
+ width: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ .title {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ margin: 107px auto 80px;
|
|
|
span {
|
|
|
- font-size:36px;
|
|
|
+ font-size: 36px;
|
|
|
font-family: "Source Han Serif CN";
|
|
|
- color:rgba(148, 83, 53, 1);
|
|
|
+ color: rgba(148, 83, 53, 1);
|
|
|
font-weight: bold;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
&:before {
|
|
|
- content:'';
|
|
|
- display:inline-block;
|
|
|
- width:27px;
|
|
|
- height:36px;
|
|
|
- background:url(../../assets/images/icon-tit-left.png)center/100% no-repeat;
|
|
|
- margin-right:20px;
|
|
|
+ content: "";
|
|
|
+ display: inline-block;
|
|
|
+ width: 27px;
|
|
|
+ height: 36px;
|
|
|
+ background: url(../../assets/images/icon-tit-left.png) center/100%
|
|
|
+ no-repeat;
|
|
|
+ margin-right: 20px;
|
|
|
}
|
|
|
&:after {
|
|
|
- content:'';
|
|
|
- display:inline-block;
|
|
|
- width:27px;
|
|
|
- height:36px;
|
|
|
- background:url(../../assets/images/icon-tit-right.png)center/100% no-repeat;
|
|
|
- margin-left:20px;
|
|
|
- }
|
|
|
+ content: "";
|
|
|
+ display: inline-block;
|
|
|
+ width: 27px;
|
|
|
+ height: 36px;
|
|
|
+ background: url(../../assets/images/icon-tit-right.png) center/100%
|
|
|
+ no-repeat;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
ul {
|
|
@@ -172,67 +183,75 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.list {
|
|
|
- display:flex;
|
|
|
+ display: flex;
|
|
|
justify-content: center;
|
|
|
- margin-bottom:100px;
|
|
|
- height:571px;
|
|
|
+ margin-bottom: 100px;
|
|
|
+ height: 571px;
|
|
|
overflow: hidden;
|
|
|
.item {
|
|
|
- position:relative;
|
|
|
- width:253px;
|
|
|
- height:571px;
|
|
|
+ position: relative;
|
|
|
+ width: 253px;
|
|
|
+ height: 571px;
|
|
|
transition: all 0.2s ease-in;
|
|
|
- float:left;
|
|
|
+ float: left;
|
|
|
&.item1 {
|
|
|
- background:url(../../assets/images/11.png)center center/644px no-repeat;
|
|
|
+ background: url(../../assets/images/11.png) -245px center/644px
|
|
|
+ no-repeat;
|
|
|
}
|
|
|
&.item2 {
|
|
|
- background:url(../../assets/images/12.png)center center/644px no-repeat;
|
|
|
+ background: url(../../assets/images/12.png) -245px center/644px
|
|
|
+ no-repeat;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
&.cur {
|
|
|
- width:644px;
|
|
|
+ width: 644px;
|
|
|
&:after {
|
|
|
- position:absolute;
|
|
|
- display:block;
|
|
|
- content:"";
|
|
|
- width:100%;
|
|
|
- height:100%;
|
|
|
- background:rgba(0,0,0,0.5);
|
|
|
+ position: absolute;
|
|
|
+ display: block;
|
|
|
+ content: "";
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
}
|
|
|
.Ztit {
|
|
|
- left:80px;
|
|
|
- z-index:2;
|
|
|
+ left: 80px;
|
|
|
+ z-index: 2;
|
|
|
&:after {
|
|
|
- content:"";
|
|
|
- display:inline-block;
|
|
|
- width:40px;
|
|
|
- height:40px;
|
|
|
- background:url(../../assets/images/btn.png)center/100% no-repeat;
|
|
|
- margin-top:22px;
|
|
|
+ content: "";
|
|
|
+ display: inline-block;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ background: url(../../assets/images/btn.png) center/100% no-repeat;
|
|
|
+ margin-top: 22px;
|
|
|
}
|
|
|
}
|
|
|
.Etit {
|
|
|
- left:58px;
|
|
|
+ left: 58px;
|
|
|
}
|
|
|
}
|
|
|
+ &.item1.cur{
|
|
|
+ background:url(../../assets/images/11.png)center center/644px no-repeat;
|
|
|
+ }
|
|
|
+ &.item2.cur{
|
|
|
+ background:url(../../assets/images/12.png)center center/644px no-repeat;
|
|
|
+ }
|
|
|
.Ztit {
|
|
|
- position:absolute;
|
|
|
- left:56px;
|
|
|
- top:50px;
|
|
|
- font-size:40px;
|
|
|
- writing-mode:tb-rl;
|
|
|
- color:rgba(243, 238, 230, 1);
|
|
|
+ position: absolute;
|
|
|
+ left: 56px;
|
|
|
+ top: 50px;
|
|
|
+ font-size: 40px;
|
|
|
+ writing-mode: tb-rl;
|
|
|
+ color: rgba(243, 238, 230, 1);
|
|
|
transition: all 0.2s ease-in;
|
|
|
font-family: "Source Han Serif CN";
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
.Etit {
|
|
|
- position:absolute;
|
|
|
- top:54px;
|
|
|
- left:28px;
|
|
|
- color:rgba(243, 238, 230, 1);
|
|
|
- font-size:12px;
|
|
|
+ position: absolute;
|
|
|
+ top: 54px;
|
|
|
+ left: 28px;
|
|
|
+ color: rgba(243, 238, 230, 1);
|
|
|
+ font-size: 12px;
|
|
|
writing-mode: tb-rl;
|
|
|
transition: all 0.2s ease-in;
|
|
|
font-family: "Source Han Serif CN";
|