Commit 1666268d by 高浩杰

完成博客、项目、回答、资讯展示页面

parent 10495d71
...@@ -14,9 +14,10 @@ ...@@ -14,9 +14,10 @@
<yun-div :font-style="[24,32,500,'#999','left']">换一换</yun-div> <yun-div :font-style="[24,32,500,'#999','left']">换一换</yun-div>
</yun-div> </yun-div>
<slot></slot> <slot></slot>
<yun-div :show-ske="false" width-v="100%" :font-style="[24,104,500,'#999','center']"> <yun-div :show-ske="false" width-v="100%" :font-style="[24,104,500,'#999','center']" bg-color-v="#fff">
<span @click="handleMore">加载更多</span> <span v-tap="handleMore">加载更多</span>
</yun-div> </yun-div>
<yun-div :width-v="750" :height-v="24"></yun-div>
</yun-div> </yun-div>
</template> </template>
......
<template> <template>
<yun-div :extend-style="{overflow: 'visible'}"> <yun-div :extend-style="{overflow: 'visible'}" bg-color-v="#fff">
<yun-div <yun-div
:width-v="704" :width-v="704"
:padding-v="[40,0]" :padding-v="[40,0]"
...@@ -38,13 +38,11 @@ ...@@ -38,13 +38,11 @@
:size="10" :size="10"
:margin-v="[0,0,0,36]" :margin-v="[0,0,0,36]"
:style="{width: 'auto', height: 'auto',transition: '0.5s',display: 'inline-block'}" :style="{width: 'auto', height: 'auto',transition: '0.5s',display: 'inline-block'}"
@click.native="handelShowFollow" v-tap="handelShowFollow"
:class="{active: show}" :class="{active: show}"
> >
</yun-icon> </yun-icon>
<yun-div <yun-div
@mousemove.native="show = true"
@mouseleave.native="show = false"
v-if="show" v-if="show"
:ske-w="104" :ske-w="104"
:width-v="164" :width-v="164"
...@@ -55,10 +53,10 @@ ...@@ -55,10 +53,10 @@
:font-style="[24,35,500,'#333','center']" :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'}" :extend-style="{borderColor: 'rgba(0,170,230,.3)', position: 'absolute',right: 0,top:commonReturnFlexedLength(46), zIndex:normalZIndex,boxSizing: 'border-box'}"
> >
<p>取消关注</p> <p v-tap="cancelFollow">取消关注</p>
<!-- 根据是否有备注修改这个 p 标签--> <!-- 根据是否有备注修改这个 p 标签-->
<p :style="{marginTop: commonReturnFlexedLength(30),marginBottom: commonReturnFlexedLength(30)}">添加备注</p> <p v-tap="addNote" :style="{marginTop: commonReturnFlexedLength(30),marginBottom: commonReturnFlexedLength(30)}">添加备注</p>
<p>移除粉丝</p> <p v-tap="moveFollow">移除粉丝</p>
</yun-div> </yun-div>
</yun-div> </yun-div>
</yun-div> </yun-div>
...@@ -87,6 +85,15 @@ export default { ...@@ -87,6 +85,15 @@ export default {
methods: { methods: {
handelShowFollow() { handelShowFollow() {
this.show = !this.show this.show = !this.show
},
cancelFollow() {
this.show = false
},
addNote() {
this.show = false
},
moveFollow() {
this.show = false
} }
} }
} }
......
...@@ -3,11 +3,14 @@ ...@@ -3,11 +3,14 @@
:height-v="76" :height-v="76"
bg-color-v="#fff" bg-color-v="#fff"
:border-v="[1,'solid','#EFEFEF','bottom']" :border-v="[1,'solid','#EFEFEF','bottom']"
:extend-style="{boxShadow: '-18px -2px 20px -23px rgba(0,0,0,.2) inset',overflowX: 'auto'}" :extend-style="{overflow: 'visible',position:'relative'}"
> >
<yun-div <yun-div
:width-v="750" :width-v="610"
:height-v="96" :height-v="96"
:ske-h="76"
:ske-w="610"
:margin-v="[0,140,0,0]"
:flex-v="['row','flex-start','flex-start']" :flex-v="['row','flex-start','flex-start']"
:font-style="[28,36,400,'#999','left']" :font-style="[28,36,400,'#999','left']"
:extend-style="{overflowX: 'auto'}" :extend-style="{overflowX: 'auto'}"
...@@ -18,10 +21,51 @@ ...@@ -18,10 +21,51 @@
v-for="(item, index) in navList" v-for="(item, index) in navList"
:class="{active:index === actived}" :class="{active:index === actived}"
:flex-v="['column','flex-start','center']" :flex-v="['column','flex-start','center']"
:key="item.label" :key="item.id"
> >
<span @click="toggle(index, item.id)">{{item.label}}</span> <nuxt-link style="color: #999;" tap="span" :to="{path:path, query: {type:item.id}}" v-tap="() => toggle(item.id)">{{item.label}}</nuxt-link>
<yun-div :width-v="16" :height-v="4" :border-r="[2,2,0,0]" :margin-v="[16,0,0]" :bg-color-v="index === actived ? '#00AAE6' : '#fff'"></yun-div> <yun-div :width-v="16" :height-v="4" :border-r="[2,2,0,0]" :margin-v="[16,0,0]"
:bg-color-v="item.id === actived ? '#00AAE6' : '#fff'"></yun-div>
</yun-div>
</yun-div>
<yun-div
:height-v="76"
:width-v="140"
:ske-h="76"
:font-style="[28,76,400,'#666','center']"
bg-color-v="#fff"
:extend-style="{position: 'absolute',right:0,top:0,overflow: 'visible'}"
>
<yun-div
:extend-style="{
boxShadow: '-28px -0px 40px -22px rgba(0,0,0,.2) inset',
position:'relative',overflow: 'visible'}"
>
<yun-div :flex-v="['row','center','center']">
<span v-tap="handleSort">{{sortWay}}</span>
<yun-icon
v-tap="handleSort"
color="#999"
:class="{actived: showSort}"
name="down_arrow2"
:size="10"
:style="{display:'inline-block',width: 'auto', height: 'auto',transition: '0.5s',marginTop:commonReturnFlexedLength(2)}">
</yun-icon>
</yun-div>
<yun-div
v-if="showSort"
:width-v="140"
bg-color-v="#F8F9F9"
:border-r="[0,0,8,8]"
:extend-style="{
position:'absolute',
right:0,top:commonReturnFlexedLength(76),
zIndex: headerZIndex}"
>
<yun-div v-for="(item,index) in sortList" :key="item">
<span class="sortLabel" v-tap="() =>handleSortWay(item)">{{item}}</span>
</yun-div>
</yun-div>
</yun-div> </yun-div>
</yun-div> </yun-div>
</yun-div> </yun-div>
...@@ -33,74 +77,57 @@ import commonMixin from "./commonMixin"; ...@@ -33,74 +77,57 @@ import commonMixin from "./commonMixin";
export default { export default {
mixins: [commonMixin], mixins: [commonMixin],
props: {
path: String,
navList: Array
},
data() { data() {
return { return {
actived: 0, actived: 0,
navList: [ sortList: ['热门', '最新'],
{ showSort: false,
label: '前端', sortWay: '最新'
id: 'all' }
},
{
label: 'JavaScript',
id: '10'
},
{
label: 'Java',
id: '11'
},
{
label: 'JavaWeb',
id: '12'
},
{
label: '前端',
id: '13'
},
{
label: '前端',
id: '14'
},
{
label: '前端',
id: '15'
},
{
label: '前端',
id: '16'
},
{
label: '前端',
id: '17'
}, },
{ mounted() {
label: '前端', this.toggle(this.$route.query.type)
id: '18'
}, },
{ watch: {
label: '前端', $route: function () {
id: '19' this.toggle(this.$route.query.type)
}
]
} }
}, },
methods: { methods: {
toggle(index, id) { toggle(id) {
this.actived = index this.actived = id
this.$router.push({ },
path: '/test', handleSort() {
query: { this.showSort = !this.showSort
type: id },
} handleSortWay(item) {
}) this.showSort = !this.showSort
this.sortWay = item
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.active { .nuxt-link-exact-active {
color: #333333 !important; color: #333333 !important;
@extend %animate-transition; @extend %animate-transition;
} }
.sortLabel {
@extend %animate-transition;
&:hover {
color: #00AAE6;
}
}
.actived {
display: inline-block;
color: #00AAE6 !important;
transition: 0.5s;
transform-origin:center center;
transform: rotate(180deg);
}
</style> </style>
...@@ -5,11 +5,11 @@ ...@@ -5,11 +5,11 @@
+ 话题卡片(1) √ + 话题卡片(1) √
+ 粉丝卡片(1) √ + 粉丝卡片(1) √
+ 用户卡片小(1) √ + 用户卡片小(1) √
+ 登陆页面(2) + 登陆页面(2)
+ 注册页面(2) + 注册页面(2)
+ 密码重置页面(2) + 密码重置页面(2)
+ navigator(3) + navigator(3)
+ 项目展示页 /pages/project/index.vue(4) + 项目展示页 /pages/project/index.vue(4)
+ 博客展示页 /pages/blog/index.vue(4) + 博客展示页 /pages/blog/index.vue(4)
+ 资讯展示页 /pages/news/index.vue(4) + 资讯展示页 /pages/news/index.vue(4)
+ 问答展示页 /pages/answer/index.vue(4) + 问答展示页 /pages/answer/index.vue(4)
<template>
<yun-slider>
<yun-div
slot="card"
>
<Nav :path="path" :nav-list="navList"></Nav>
<answer-card></answer-card>
<answer-card></answer-card>
<answer-card></answer-card>
<answer-card></answer-card>
<answer-card></answer-card>
</yun-div>
</yun-slider>
</template>
<script>
import Nav from "../../components/moblie/nav";
import AnswerCard from "../../components/moblie/answerCard";
export default {
components: {AnswerCard, Nav},
data() {
return {
path: '/answer',
navList: [
{
label: '全部问答',
id: 'all'
},
{
label: '讨论',
id: '10'
},
{
label: '项目讨论',
id: '11'
},
{
label: '问题求助',
id: '12'
},
{
label: '技术交流',
id: '13'
},
{
label: '前端技术交流',
id: '14'
},
{
label: '前技术交流端',
id: '15'
},
{
label: '吃土少女技术交流',
id: '16'
}
]
}
},
created() {
if (this.$route.query.type) {
return
}
this.$router.replace({
path: '/answer',
query: {
type: 'all'
}
})
}
}
</script>
<style lang="scss" scoped>
</style>
<template>
<yun-slider>
<yun-div
slot="card"
>
<Nav :path="path" :nav-list="navList"></Nav>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
</yun-div>
</yun-slider>
</template>
<script>
import Nav from "../../components/moblie/nav";
import ProjectCard from "../../components/moblie/projectCard";
export default {
components: {ProjectCard, Nav},
data() {
return {
path: '/blog',
navList: [
{
label: '全部博客',
id: 'all'
},
{
label: 'JavaScript',
id: '10'
},
{
label: 'Java',
id: '11'
},
{
label: 'JavaWeb',
id: '12'
},
{
label: '前端',
id: '13'
},
{
label: '算法',
id: '14'
},
{
label: '移动开发',
id: '15'
},
{
label: 'C&C++',
id: '16'
},
{
label: '数据库',
id: '17'
},
{
label: 'python',
id: '18'
}
]
}
},
created() {
if (this.$route.query.type) {
return
}
this.$router.replace({
path: '/blog',
query: {
type: 'all'
}
})
}
}
</script>
<style lang="scss" scoped>
</style>
<template>
<yun-slider>
<yun-div
slot="card"
>
<Nav :path="path" :nav-list="navList"></Nav>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
</yun-div>
</yun-slider>
</template>
<script>
import Nav from "../../components/moblie/nav";
import ProjectCard from "../../components/moblie/projectCard";
export default {
components: {ProjectCard, Nav},
data() {
return {
path: '/news',
navList: [
{
label: '新闻速递',
id: 'all'
},
{
label: '行业资讯',
id: '10'
},
{
label: '软件更新',
id: '11'
}
]
}
},
created() {
if (this.$route.query.type) {
return
}
this.$router.replace({
path: '/news',
query: {
type: 'all'
}
})
}
}
</script>
<style lang="scss" scoped>
</style>
<template>
<yun-slider>
<yun-div
slot="card"
>
<Nav :path="path" :nav-list="navList"></Nav>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
</yun-div>
</yun-slider>
</template>
<script>
import Nav from "../../components/moblie/nav";
import ProjectCard from "../../components/moblie/projectCard";
export default {
components: {ProjectCard, Nav},
data() {
return {
path: '/project',
navList: [
{
label: '全部项目',
id: 'all'
},
{
label: '前端框架',
id: '10'
},
{
label: 'Java',
id: '11'
},
{
label: 'JavaWeb',
id: '12'
},
{
label: '基础框架',
id: '13'
},
{
label: 'web应用',
id: '14'
},
{
label: '桌面应用',
id: '15'
},
{
label: '游戏开发',
id: '16'
},
{
label: '自娱自乐',
id: '17'
},
{
label: '吃土女孩',
id: '18'
}
]
}
},
created() {
if (this.$route.query.type) {
return
}
this.$router.replace({
path: '/project',
query: {
type: 'all'
}
})
}
}
</script>
<style lang="scss" scoped>
</style>
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
:ske-h="36" :ske-h="36"
:src="Logo"> :src="Logo">
</yun-img> </yun-img>
<yun-div :font-style="[28,37,500,'#333','left']" @click.native="toRegister">注册</yun-div> <yun-div :font-style="[28,37,500,'#333','left']" v-tap="toRegister">注册</yun-div>
</yun-div> </yun-div>
<yun-div <yun-div
:width-v="704" :width-v="704"
...@@ -26,9 +26,9 @@ ...@@ -26,9 +26,9 @@
:margin-v="[0,0,56,0]" :margin-v="[0,0,56,0]"
:font-style="[32,43,500,'#999','center']" :font-style="[32,43,500,'#999','center']"
> >
<span :class="{actived: isPassword}" @click="handleLoginWayOne">密码登录</span> <span :class="{actived: isPassword}" v-tap="handleLoginWayOne">密码登录</span>
<span :style="{margin: commonReturnFlexedLength(18)}">·</span> <span :style="{margin: commonReturnFlexedLength(18)}">·</span>
<span :class="{actived: !isPassword}" @click="handleLoginWayTwo">短信登录</span> <span :class="{actived: !isPassword}" v-tap="handleLoginWayTwo">短信登录</span>
</yun-div> </yun-div>
<yun-input <yun-input
:key="inputKey" :key="inputKey"
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
:height-v="86" :height-v="86"
:border-r="[8]" :border-r="[8]"
:extend-style="{lineHeight:commonReturnFlexedLength(86),position: 'absolute',top: 0,right: 0}"> :extend-style="{lineHeight:commonReturnFlexedLength(86),position: 'absolute',top: 0,right: 0}">
<yun-icon :name="iconName" :size="20" color="#999" @click.native="showPassword"></yun-icon> <yun-icon :name="iconName" :size="20" color="#999" v-tap="showPassword"></yun-icon>
</yun-div> </yun-div>
</yun-div> </yun-div>
<yun-div :show-ske="false" v-else> <yun-div :show-ske="false" v-else>
...@@ -76,7 +76,7 @@ ...@@ -76,7 +76,7 @@
:border-r="[8]" :border-r="[8]"
:font-style="[26,35,500,'#75D098','left']" :font-style="[26,35,500,'#75D098','left']"
:extend-style="{lineHeight:commonReturnFlexedLength(86),position: 'absolute',top: 0,right: 0}" :extend-style="{lineHeight:commonReturnFlexedLength(86),position: 'absolute',top: 0,right: 0}"
@click.native="sendSms" v-tap="sendSms"
> >
{{timing}} {{timing}}
</yun-div> </yun-div>
...@@ -95,7 +95,7 @@ ...@@ -95,7 +95,7 @@
<label for="automatic"></label> <label for="automatic"></label>
<yun-div :margin-v="[0,0,0,16]">下次自动登录</yun-div> <yun-div :margin-v="[0,0,0,16]">下次自动登录</yun-div>
</yun-div> </yun-div>
<yun-div @click.native="toReset">忘记密码</yun-div> <yun-div v-tap="toReset">忘记密码</yun-div>
</yun-div> </yun-div>
<yun-div :width-v="344" :flex-v="['row','space-between','center']" :margin-v="[69,120,72]"> <yun-div :width-v="344" :flex-v="['row','space-between','center']" :margin-v="[69,120,72]">
<yun-div :width-v="80" :height-v="80" :flex-v="['row','center','center']" :border-r="['50%']" <yun-div :width-v="80" :height-v="80" :flex-v="['row','center','center']" :border-r="['50%']"
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
:ske-h="36" :ske-h="36"
:src="Logo"> :src="Logo">
</yun-img> </yun-img>
<yun-div :font-style="[28,37,500,'#333','left']" @click.native="toLogin">登录</yun-div> <yun-div :font-style="[28,37,500,'#333','left']" v-tap="toLogin">登录</yun-div>
</yun-div> </yun-div>
<yun-div <yun-div
:width-v="704" :width-v="704"
...@@ -26,9 +26,9 @@ ...@@ -26,9 +26,9 @@
:margin-v="[0,0,56,0]" :margin-v="[0,0,56,0]"
:font-style="[32,43,500,'#999','center']" :font-style="[32,43,500,'#999','center']"
> >
<span :class="{actived: isPhone}" @click="handleLoginWayOne">手机号注册</span> <span :class="{actived: isPhone}" v-tap="handleLoginWayOne">手机号注册</span>
<span :style="{margin: commonReturnFlexedLength(18)}">·</span> <span :style="{margin: commonReturnFlexedLength(18)}">·</span>
<span :class="{actived: !isPhone}" @click="handleLoginWayTwo">邮箱号注册</span> <span :class="{actived: !isPhone}" v-tap="handleLoginWayTwo">邮箱号注册</span>
</yun-div> </yun-div>
<yun-input <yun-input
v-if="isPhone" v-if="isPhone"
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
:height-v="86" :height-v="86"
:border-r="[8]" :border-r="[8]"
:extend-style="{lineHeight:commonReturnFlexedLength(86),position: 'absolute',top: 0,right: 0}"> :extend-style="{lineHeight:commonReturnFlexedLength(86),position: 'absolute',top: 0,right: 0}">
<yun-icon :name="iconName" :size="20" color="#999" @click.native="showPassword"></yun-icon> <yun-icon :name="iconName" :size="20" color="#999" v-tap="showPassword"></yun-icon>
</yun-div> </yun-div>
</yun-div> </yun-div>
<yun-div :show-ske="false" v-if="isPhone"> <yun-div :show-ske="false" v-if="isPhone">
...@@ -87,7 +87,7 @@ ...@@ -87,7 +87,7 @@
:border-r="[8]" :border-r="[8]"
:font-style="[26,35,500,'#75D098','left']" :font-style="[26,35,500,'#75D098','left']"
:extend-style="{lineHeight:commonReturnFlexedLength(86),position: 'absolute',top: 0,right: 0}" :extend-style="{lineHeight:commonReturnFlexedLength(86),position: 'absolute',top: 0,right: 0}"
@click.native="sendSms" v-tap="sendSms"
> >
{{timing}} {{timing}}
</yun-div> </yun-div>
...@@ -107,7 +107,7 @@ ...@@ -107,7 +107,7 @@
<label for="automatic"></label> <label for="automatic"></label>
<yun-div :margin-v="[0,0,0,16]">我已阅读并同意<span style="color: #666666">用户协议</span><span style="color:#666666;">隐私政策</span></yun-div> <yun-div :margin-v="[0,0,0,16]">我已阅读并同意<span style="color: #666666">用户协议</span><span style="color:#666666;">隐私政策</span></yun-div>
</yun-div> </yun-div>
<yun-div @click.native="toReset">忘记密码</yun-div> <yun-div v-tap="toReset">忘记密码</yun-div>
</yun-div> </yun-div>
<yun-div :width-v="344" :flex-v="['row','space-between','center']" :margin-v="[69,120,72]"> <yun-div :width-v="344" :flex-v="['row','space-between','center']" :margin-v="[69,120,72]">
<yun-div :width-v="80" :height-v="80" :flex-v="['row','center','center']" :border-r="['50%']" <yun-div :width-v="80" :height-v="80" :flex-v="['row','center','center']" :border-r="['50%']"
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
:ske-h="36" :ske-h="36"
:src="Logo"> :src="Logo">
</yun-img> </yun-img>
<yun-div :font-style="[28,37,500,'#333','left']" @click.native="toRegister">注册</yun-div> <yun-div :font-style="[28,37,500,'#333','left']" v-tap="toRegister">注册</yun-div>
</yun-div> </yun-div>
<yun-div <yun-div
:width-v="704" :width-v="704"
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
:height-v="86" :height-v="86"
:border-r="[8]" :border-r="[8]"
:extend-style="{lineHeight:commonReturnFlexedLength(86),position: 'absolute',top: 0,right: 0}"> :extend-style="{lineHeight:commonReturnFlexedLength(86),position: 'absolute',top: 0,right: 0}">
<yun-icon :name="iconName" :size="20" color="#999" @click.native="showPassword"></yun-icon> <yun-icon :name="iconName" :size="20" color="#999" v-tap="showPassword"></yun-icon>
</yun-div> </yun-div>
</yun-div> </yun-div>
<yun-div :show-ske="false"> <yun-div :show-ske="false">
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
:border-r="[8]" :border-r="[8]"
:font-style="[26,35,500,'#75D098','left']" :font-style="[26,35,500,'#75D098','left']"
:extend-style="{lineHeight:commonReturnFlexedLength(86),position: 'absolute',top: 0,right: 0}" :extend-style="{lineHeight:commonReturnFlexedLength(86),position: 'absolute',top: 0,right: 0}"
@click.native="sendSms" v-tap="sendSms"
> >
{{timing}} {{timing}}
</yun-div> </yun-div>
...@@ -92,9 +92,9 @@ ...@@ -92,9 +92,9 @@
<yun-div :margin-v="[0,0,0,16]">我已阅读并同意<span style="color: #666666">用户协议</span><span style="color:#666666;">隐私政策</span></yun-div> <yun-div :margin-v="[0,0,0,16]">我已阅读并同意<span style="color: #666666">用户协议</span><span style="color:#666666;">隐私政策</span></yun-div>
</yun-div> </yun-div>
<yun-div> <yun-div>
<span @click="toLogin">登录</span> <span v-tap="toLogin">登录</span>
<span>·</span> <span>·</span>
<span @click="toRegister">注册</span> <span v-tap="toRegister">注册</span>
</yun-div> </yun-div>
</yun-div> </yun-div>
<yun-div :width-v="344" :flex-v="['row','space-between','center']" :margin-v="[69,120,72]"> <yun-div :width-v="344" :flex-v="['row','space-between','center']" :margin-v="[69,120,72]">
......
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