Commit 2c4d483a by xuebiao

完成个人资料项目卡片,空卡片

parent 0da05c5f
<template>
<yun-slider>
<yun-div
:style="{height: height, lineHeight: height}"
:flex-v="['row','center','center']"
slot="card"
>
<img
src="../../assets/svg/null.svg"
>
</yun-div>
</yun-slider>
</template>
<script>
import commonMixin from "./commonMixin";
export default {
mixins: [commonMixin],
name: "emptyCard",
props: {
height: String
}
}
</script>
<style scoped>
</style>
......@@ -18,7 +18,7 @@
:border-r="[50,50,50,50]"
></yun-img>
<yun-div
:margin-v="[0,25]"
:style="{marginLeft: commonReturnFlexedLength(25)}"
>
<yun-div :font-style="[24]" :ske-w="400" :ske-h="35">系统<span style="color:#999999" :style="{marginLeft: commonReturnFlexedLength(20)}">2020-2-19 11:11:21</span></yun-div>
<yun-div :font-style="[30]" :ske-w="300" :ske-h="40" :margin-v="[5,0,0,0]">用户关注了你!</yun-div>
......
<template>
<yun-slider>
<yun-div
:width-v="704"
:margin-v="[0,'auto']"
:padding-v="[34,0,40]"
:flex-v="['row','space-between','flex-start']"
:border-v="[1,'solid','#EFEFEF','bottom']"
slot="card"
>
<yun-div
:flex-v="['column','space-between','flex-start']"
>
<yun-div
:ske-h="55"
:font-style="[30,40,400,'black','left']"
>
云里云外开源社区云里云外开源
<yun-icon
:width-v="30"
:height-v="30"
:border-r="[4]"
:margin-v="[0,8,0,16]"
:padding-v="[8,8.5]"
bg-color-v="#FF7474"
name="hot"
:size="20"
color="#fff">
</yun-icon>
<yun-icon
:width-v="30"
:height-v="30"
:padding-v="[8,8.5]"
:border-r="[4]"
bg-color-v="#F8A06F"
name="like2"
:size="20"
color="#fff">
</yun-icon>
</yun-div>
<yun-div
:font-style="[20,24,400,'#999','left']"
:style="{marginTop:commonReturnFlexedLength(16)}"
:skeW="500"
:skeH="40"
>
1etris <span class="left-box__dot">·</span> 2020-2-18 10:24:00
<span class="left-box__like-icon">
<yun-icon name="like1"
:line-height-v="24"
:margin-v="[0,0,0,40]"
:size="20"
color="#ccc"></yun-icon>
<span>12</span>
</span>
<span class="left-box__view-icon">
<yun-icon name="view"
:margin-v="[0,0,0,24]"
:line-height-v="24"
:size="20"
color="#ccc"></yun-icon>
<span>12</span>
</span>
</yun-div>
</yun-div>
<yun-div
:flex-v="['row','flex-start','flex-start']"
:extend-style="{position: 'relative',overflow: 'visible'}"
>
<yun-icon
color="#AAAAAA"
name="down_arrow"
:size="10"
:margin-v="[0,0,0,36]"
:style="{width: 'auto', height: 'auto',transition: '0.5s',display: 'inline-block'}"
@click.native="handelShowFollow"
:class="{active: show}"
>
</yun-icon>
<yun-img
:width-v="74"
:height-v="74"
:ske-h="74"
:ske-w="74"
:border-r="[6,6,6,6]"
:style="{marginLeft:commonReturnFlexedLength(20)} "
></yun-img>
</yun-div>
</yun-div>
</yun-slider>
</template>
<script>
import commonMixin from "./commonMixin";
export default {
mixins:[commonMixin],
name: "personalProjectCard",
data() {
return {
imgSrc: '',
show: false
}
},
methods: {
handelShowFollow() {
this.show = !this.show
}
}
}
</script>
<style lang="scss" scoped>
.active {
display: inline-block;
color: #00AAE6 !important;
transition: 0.5s;
transform-origin:center center;
transform: rotate(180deg);
}
</style>
......@@ -24,22 +24,22 @@
src=""
></yun-img>
<yun-div
:margin-v="[0,25]"
:style="{marginLeft: commonReturnFlexedLength(25)}"
:height-v="102"
:flex-v="['column','space-between','flex-start']"
>
<yun-div :font-style="[36,36]" :ske-w="150" :ske-h="50">激动啊</yun-div>
<yun-div :font-style="[24,36,500,'#999999']" :ske-h="40">设计的力量</yun-div>
<yun-div :font-style="[24,36,400,'#999999']" :width-v="400" :no-wrap="true" :ske-h="40">设计设计的力量设计的力量的力量设计的力量</yun-div>
</yun-div>
</yun-div>
<yun-div
:height-v="102"
:font-style="[24,36,500,'#999999','left']"
:font-style="[24,36,400,'#999999','left']"
:flex-v="['row','flex-start','center']"
>
账号资料
<yun-icon
:margin-v="[0,0,0,15]"
:style="{marginLeft:commonReturnFlexedLength(15)}"
name="left_arrow"
></yun-icon>
</yun-div>
......@@ -53,7 +53,7 @@
>
<yun-div
:ske-h="60"
:font-style="[24,36,500,'#999999','center']"
:font-style="[24,36,400,'#999999','center']"
>
关注
</yun-div>
......@@ -66,7 +66,7 @@
>
<yun-div
:ske-h="60"
:font-style="[24,36,500,'#999999','center']"
:font-style="[24,36,400,'#999999','center']"
>
人气
</yun-div>
......@@ -79,7 +79,7 @@
>
<yun-div
:ske-h="60"
:font-style="[24,36,500,'#999999','center']"
:font-style="[24,36,400,'#999999','center']"
>
粉丝
</yun-div>
......
......@@ -2,5 +2,5 @@
+ 消息卡片(1)✅
+ 用户卡片大(1)✅
+ 个人资料项目卡片(1)
+ 空卡片(1)
+ 个人资料项目卡片(1)
+ 空卡片(1)
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment