You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
261 lines
5.2 KiB
261 lines
5.2 KiB
<template> |
|
<view> |
|
<Head isfanhui="true" /> |
|
<view class="top_box"> |
|
<view class="top_box_one"> |
|
<view></view> |
|
<view> |
|
<image src="../../static/xinkong.png"></image> |
|
<text>收藏</text> |
|
</view> |
|
</view> |
|
<view class="top_box_two"> |
|
<image src="../../static/tx.jpg" mode=""></image> |
|
</view> |
|
<view class="top_box_three"> |
|
<text style="color: #ffffff;font-size: 38rpx;">这个杀手不太冷</text> |
|
<view style="font-size: 27rpx;line-height: 50rpx;"> |
|
<text>作品：1</text> |
|
<text style="margin-left: 20rpx;">粉丝：14</text> |
|
</view> |
|
<view :class="zhankai?'yingchang':''"> |
|
中国当代新潮艺术家，毕业于清华大学美术，欧洲美术中国当代新潮艺术家，毕业于清华大学美术，欧洲美术中国当代新潮艺术家，毕业于清华大学美术，欧洲美术中国当代新潮艺术家，毕业于清华大学美术，欧洲美术中国当代新潮艺术家， |
|
</view> |
|
<view class="image_box"> |
|
<image @click="kzzhankai(true)" v-if="zhankai==false" src="../../static/shang.png"></image> |
|
<image @click="kzzhankai(false)" v-if="zhankai" src="../../static/xia.png"></image> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="title_zp"> |
|
<image src="../../static/xinkong.png"></image> |
|
<text>作品(2)</text> |
|
<image src="../../static/xinkong.png" mode=""></image> |
|
</view> |
|
<view class="listcontent"> |
|
<view class="listitem" v-for="(item,index) in 5" @click="qiehuan(item)"> |
|
<view class="item-img"> |
|
<image src="../../static/bcimg/bc.jpeg" mode=""></image> |
|
</view> |
|
|
|
<view class="item-name"> |
|
<view class=""> |
|
《两只老虎》 |
|
</view> |
|
</view> |
|
<view class="foot"> |
|
<view class="footimg"> |
|
<image src="../../static/bcimg/bc.jpeg" mode=""></image> |
|
</view> |
|
<view class="footname"> |
|
琳琅天上 |
|
</view> |
|
<view class="price"> |
|
￥12800 |
|
</view> |
|
</view> |
|
</view> |
|
|
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import Head from '@/components/head/head.vue' |
|
export default { |
|
components: { |
|
Head |
|
}, |
|
data() { |
|
return { |
|
zhankai: true |
|
} |
|
}, |
|
methods: { |
|
kzzhankai(val) { |
|
this.zhankai = val |
|
}, |
|
qiehuan(val){ |
|
uni.navigateTo({ |
|
url:'../datail/datail' |
|
}) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
.Title { |
|
color: #65f9ff; |
|
text-align: center; |
|
font-size: 34rpx; |
|
} |
|
|
|
.listcontent { |
|
width: 700rpx; |
|
margin: 0rpx auto; |
|
display: flex; |
|
justify-content: space-between; |
|
flex-wrap: wrap; |
|
padding-top: 20rpx; |
|
padding-bottom: 50rpx; |
|
|
|
.listitem { |
|
width: 330rpx; |
|
height: 440rpx; |
|
border: solid 2rpx #484848; |
|
border-radius: 20rpx; |
|
margin-top: 30rpx; |
|
|
|
.item-img { |
|
image { |
|
width: 330rpx; |
|
height: 290rpx; |
|
border-radius: 20rpx; |
|
} |
|
} |
|
|
|
.item-name { |
|
display: flex; |
|
color: #FFFFFF; |
|
margin-top: 10rpx; |
|
|
|
} |
|
|
|
.foot { |
|
display: flex; |
|
margin: 0rpx auto; |
|
align-items: center; |
|
margin-top: 20rpx; |
|
|
|
.footimg { |
|
width: 60rpx; |
|
height: 60rpx; |
|
border-radius: 50%; |
|
box-sizing: border-box; |
|
border: 2rpx solid #586b6d50; |
|
margin-right: 10rpx; |
|
margin-left: 10rpx; |
|
|
|
image { |
|
width: 50rpx; |
|
height: 50rpx; |
|
border-radius: 50%; |
|
margin-top: 5rpx; |
|
margin-left: 5rpx; |
|
} |
|
} |
|
|
|
.footname { |
|
color: #99999a; |
|
font-size: 26rpx; |
|
width: 102rpx; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
white-space: nowrap; |
|
} |
|
|
|
.price { |
|
color: #53d3fd; |
|
font-size: 26rpx; |
|
float: right; |
|
margin-left: 40rpx; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.title_zp { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
margin: auto; |
|
margin-top: 45rpx; |
|
color: #66f9fe; |
|
|
|
>image { |
|
width: 100rpx; |
|
height: 30rpx; |
|
} |
|
} |
|
|
|
.image_box { |
|
>image { |
|
margin-top: 20rpx; |
|
width: 40rpx; |
|
height: 30rpx; |
|
} |
|
} |
|
|
|
.yingchang { |
|
display: -webkit-box; |
|
-webkit-box-orient: vertical; |
|
-webkit-line-clamp: 3; |
|
overflow: hidden; |
|
} |
|
|
|
.top_box_three { |
|
color: #7b7e7e; |
|
background-color: #ffffff20; |
|
border: 1rpx solid #777b77; |
|
border-radius: 20rpx; |
|
padding: 120rpx 30rpx 20rpx 40rpx; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
margin-top: -80rpx; |
|
} |
|
|
|
.top_box_two { |
|
width: 160rpx; |
|
height: 160rpx; |
|
border-radius: 50%; |
|
// padding: 15rpx; |
|
border: 1rpx solid #777b77; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
margin: auto; |
|
margin-top: 50rpx; |
|
|
|
>image { |
|
width: 140rpx; |
|
height: 140rpx; |
|
border-radius: 50%; |
|
} |
|
} |
|
|
|
.top_box_one { |
|
display: flex; |
|
justify-content: space-between; |
|
|
|
>view:nth-of-type(2) { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
background-color: #ffffff50; |
|
color: #ffffff; |
|
padding: 7rpx 20rpx; |
|
border-radius: 25rpx; |
|
|
|
>image { |
|
width: 35rpx; |
|
height: 35rpx; |
|
} |
|
|
|
>text { |
|
margin-left: 10rpx; |
|
font-size: 28rpx; |
|
} |
|
} |
|
} |
|
|
|
.top_box { |
|
padding: 150rpx 30rpx 0 30rpx; |
|
box-sizing: border-box; |
|
} |
|
|
|
page { |
|
background-color: #1a1a1a; |
|
} |
|
</style>
|
|
|