Skip to content

B
beyond-clouds-frontM
Commit bb5173dc by yanju
Options

Merge branch 'master' of coding.yundingshuyuan.com:yunshen/beyond-clouds-frontM

parents b507f90c 0da05c5f
Showing with 341 additions and 14 deletions
components/moblie/answerCard.vue
......@@ -10,10 +10,10 @@
slot="card">
<yun-div
:flex-v="['row','flex-start','center']"
:font-style="[30,40,500,'#333','start']"
:font-style="[30,40,500,'#333','left']"
:ske-w="704"
:skeH="40"
> <yun-div :no-wrap="true" :extend-style="{maxWidth: commonReturnFlexedLength(620)}">
> <yun-div :no-wrap="true" :extend-style="{maxWidth: commonReturnFlexedLength(596)}">
大家期望咱们的手机版有什么功能哇？
</yun-div>
<yun-div>
......@@ -43,10 +43,10 @@
</yun-div>
<yun-div
:font-style="[20,27,500,'#666','start']"
:font-style="[20,27,500,'#666','left']"
:margin-v="[12,0,0]"
:skeW="500"
:skeH="40"
:skeH="27"
>
26回答
<span>·</span>
......
components/moblie/containerCard.vue 0 → 100644
<template>
<yun-div>
<yun-div
:width-v="704"
:padding-v="[26,paddingL,20]"
bg-color-v="#fff"
:margin-v="[0,'auto']"
:border-v="[1,'solid','#EFEFEF','bottom']"
:flex-v="['row','space-between','center']">
<yun-div :flex-v="['row','flex-start','baseline']" :font-style="[30,40,500,'#2F2F2F','left']">
<yun-div :width-v="4" :height-v="16" bg-color-v="#00AAE6" :border-r="[0,2,2,0]" :margin-v="[0,13,0,0]"></yun-div>
<p>社区精英</p>
</yun-div>
<yun-div :font-style="[24,32,500,'#999','left']">换一换</yun-div>
</yun-div>
<slot></slot>
<yun-div :show-ske="false" width-v="100%" :font-style="[24,104,500,'#999','center']">
<span @click="handleMore">加载更多</span>
</yun-div>
</yun-div>
</template>
<script>
import commonMixin from "./commonMixin";
export default {
mixins: [commonMixin],
methods: {
handleMore() {
console.log(2);
}
}
}
</script>
<style lang="scss" scoped>
</style>
components/moblie/fansCard.vue 0 → 100644
<template>
<yun-div :extend-style="{overflow: 'visible'}">
<yun-div
:width-v="704"
:padding-v="[40,0]"
bg-color-v="#fff"
:margin-v="[0,'auto']"
:flex-v="['row','flex-start','flex-start']"
:border-v="[1,'solid','#EFEFEF','bottom']"
:extend-style="{overflow: 'visible'}"
>
<yun-img :src="imgSrc" :ske-w="102" :ske-h="102" :width-v="102" :height-v="102" :border-r="['50%']"></yun-img>
<yun-div
:flex-v="['column','flex-start','flex-start']"
width-v="602"
:margin-v="[0,0,0,paddingL]"
:extend-style="{overflow: 'visible'}"
>
<yun-div
:width-v="579"
:font-style="[36,48,500,'#333','left']"
:flex-v="['row','space-between','center']"
:ske-h="48"
:extend-style="{overflow: 'visible'}"
>
<yun-div
:flex-v="['row','flex-start','center']">
<span>激动</span>
<span
:style="{fontSize: commonReturnFlexedLength(28),marginLeft: commonReturnFlexedLength(10)}"
>（备注名）</span>
</yun-div>
<yun-div :font-style="[24,32,500,'#999','left']" :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-div
@mousemove.native="show = true"
@mouseleave.native="show = false"
v-if="show"
:ske-w="104"
:width-v="164"
:padding-v="[35,30]"
:border-r="[8]"
:border-v="[1,'solid','#222']"
bg-color-v="#fff"
:font-style="[24,35,500,'#333','center']"
:extend-style="{borderColor: 'rgba(0,170,230,.3)', position: 'absolute',right: 0,top:commonReturnFlexedLength(46), zIndex:normalZIndex,boxSizing: 'border-box'}"
>
<p>取消关注</p>
<!-- 根据是否有备注修改这个 p 标签-->
<p :style="{marginTop: commonReturnFlexedLength(30),marginBottom: commonReturnFlexedLength(30)}">添加备注</p>
<p>移除粉丝</p>
</yun-div>
</yun-div>
</yun-div>
<yun-div
:width-v="579"
:no-wrap="true"
:margin-v="[14,0,0,0]"
:font-style="[24,32,500,'#999','left']"
:ske-w="579">签名假如特别长的话就显示啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</yun-div>
</yun-div>
</yun-div>
</yun-div>
</template>
<script>
import commonMixin from "./commonMixin";
export default {
mixins: [commonMixin],
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>
components/moblie/newsCard.vue
......@@ -6,7 +6,7 @@
:padding-v="[34,0,40]"
:margin-v="[0,'auto']"
:border-v="[1,'solid','#EFEFEF','bottom']"
:flex-v="['row','justify-content','flex-start']"
:flex-v="['row','flex-start','flex-start']"
slot="card"
>
<yun-img
......@@ -19,10 +19,9 @@
></yun-img>
<yun-div
:margin-v="[0,25]"
:flex-v="['column','justify-content','space-between']"
>
<yun-div :font-style="[24]">系统<span style="color:#999999" :style="{marginLeft: commonReturnFlexedLength(20)}">2020-2-19 11:11:21</span></yun-div>
<yun-div :font-style="[30]">用户关注了你！</yun-div>
<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>
</yun-div>
<yun-icon
style="position: absolute"
......
components/moblie/topicCard.vue 0 → 100644
<template>
<yun-slider>
<yun-div
:width-v="704"
:margin-v="[0,'auto']"
:padding-v="[40,0]"
bg-color-v="#fff"
:flex-v="['row','flex-start','flex-start']"
:border-v="[1,'solid','#EFEFEF','bottom']"
slot="card"
>
<yun-div :ske-h="100" :width-v="100" :flex-v="['row', 'space-between','flex-start']" :flex-wrap="true">
<yun-div :width-v="48" :height-v="48" bg-color-v="#B4DDDE" v-if="imgSrc === ''" :border-r="[4]"></yun-div>
<yun-div :width-v="48" :height-v="48" bg-color-v="#E0BDBD" v-if="imgSrc === ''" :border-r="[4]"></yun-div>
<yun-div :width-v="48" :height-v="48" bg-color-v="#9FBBC9" v-if="imgSrc === ''" :margin-v="[4,0,0,0]" :border-r="[4]"></yun-div>
<yun-div :width-v="48" :height-v="48" bg-color-v="#A6E2B6" v-if="imgSrc === ''" :margin-v="[4,0,0,0]" :border-r="[4]"></yun-div>
<yun-img :src="imgSrc" v-if="imgSrc !== ''" :width-v="100" :height-v="100" :border-r="[8]" :ske-w="100" :ske-h="100"></yun-img>
</yun-div>
<yun-div :margin-v="[0,0,0,16]">
<yun-div :ske-w="588" :width-v="588" :font-style="[36,48,500,'#333','left']" :flex-v="['row','space-between','center']">
<span># 设计 #</span>
<span @click="handelFocus" :style="{fontSize:commonReturnFlexedLength(28),flexShrink: 0}">{{focus ? '取消关注' : '+关注'}}</span>
</yun-div>
<yun-div :font-style="[20,27,500,'#999','left']" :margin-v="[15,0,0,0]">56万讨论·1.5亿阅读</yun-div>
</yun-div>
</yun-div>
</yun-slider>
</template>
<script>
import commonMixin from "./commonMixin";
export default {
mixins: [commonMixin],
data() {
return {
imgSrc: '',
focus: false
}
},
methods: {
handelFocus() {
this.focus = !this.focus
}
}
}
</script>
<style scoped>
</style>
components/moblie/userCardBig.vue
......@@ -2,9 +2,96 @@
<yun-slider>
<yun-div
:width-v="704"
:height-v="244"
:margin-v="[0,'auto']"
:padding-v="[34,0,40]"
:flex-v="['column','space-between','flex-start']"
slot="card"
>
<yun-div
:width-v="704"
:flex-v="['row','space-between','flex-start']"
>
<yun-div
:flex-v="['row','flex-start','flex-start']"
>
<yun-img
:width-v="102"
:height-v="102"
:ske-h="102"
:ske-w="102"
:border-r="[50,50,50,50]"
src=""
></yun-img>
<yun-div
:margin-v="[0,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>
</yun-div>
<yun-div
:height-v="102"
:font-style="[24,36,500,'#999999','left']"
:flex-v="['row','flex-start','center']"
>
账号资料
<yun-icon
:margin-v="[0,0,0,15]"
name="left_arrow"
></yun-icon>
</yun-div>
</yun-div>
<yun-div
:width-v="704"
:flex-v="['row','space-around','flex-start']"
>
<yun-div
:flex-v="['column','space-between','center']"
>
<yun-div
:ske-h="60"
:font-style="[24,36,500,'#999999','center']"
>
关注
</yun-div>
<yun-div
:font-style="[36,60,500,'black','center']"
>1223</yun-div>
</yun-div>
<yun-div
:flex-v="['column','space-between','center']"
>
<yun-div
:ske-h="60"
:font-style="[24,36,500,'#999999','center']"
>
人气
</yun-div>
<yun-div
:font-style="[36,60,500,'black','center']"
>123</yun-div>
</yun-div>
<yun-div
:flex-v="['column','space-between','center']"
>
<yun-div
:ske-h="60"
:font-style="[24,36,500,'#999999','center']"
>
粉丝
</yun-div>
<yun-div
:font-style="[36,60,500,'black','center']"
>153</yun-div>
</yun-div>
</yun-div>
</yun-div>
></yun-div>
</yun-slider>
</template>
......
components/moblie/userCardX.vue 0 → 100644
<template>
<yun-slider>
<yun-div
:width-v="704"
:padding-v="[40,0,40]"
bg-color-v="#fff"
:margin-v="[0,'auto']"
:flex-v="['row','flex-start','center']"
:border-v="[1,'solid','#EFEFEF','bottom']"
slot="card">
<yun-img :src="imgSrc" :ske-w="90" :ske-h="90" :width-v="90" :height-v="90" :border-r="['50%']"></yun-img>
<yun-div :width-v="588" :margin-v="[0,0,0,16]" :flex-v="['row','space-between','center']">
<yun-div :flex-v="['column','flex-start','flex-start']">
<yun-div :ske-w="100" :font-style="[28,37,500,'#333','left']">名字啊</yun-div>
<yun-div :ske-w="200" :font-style="[20,27,500,'#999','left']" :margin-v="[15,0,0,0]">56万讨论·1.5亿阅读</yun-div>
</yun-div>
<yun-div v-if="isLogin" @click.native="handelFocus" :ske-w="150" :font-style="[24,32,500,'#55B946','left']" :class="{active: focus}">{{focus ? '取消关注' : '+关注'}}</yun-div>
<yun-div :font-style="[24,32,500,'#999','left']" v-else>Ta的主页</yun-div>
</yun-div>
</yun-div>
</yun-slider>
</template>
<script>
import commonMixin from "./commonMixin";
export default {
mixins: [commonMixin],
data() {
return {
imgSrc: '',
focus: false,
isLogin: false
}
},
methods: {
handelFocus() {
this.focus = !this.focus
}
}
}
</script>
<style lang="scss" scoped>
.active {
color: #999 !important;
}
</style>
dev-schedule__ghj.md
##dev-schedule__ghj
+ 问题卡片(1) √
+ 容器卡片(1)
+ 话题卡片(1)
+ 粉丝卡片(1)
+ 用户卡片小(1)
+ 容器卡片(1) √
+ 话题卡片(1) √
+ 粉丝卡片(1) √
+ 用户卡片小(1) √
dev-schedule__xb.md
##dev-schedule__xb
+ 消息卡片(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