Skip to content

B
beyond-clouds-frontM
Commit 1666268d by 高浩杰
Options

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

parent 10495d71
Showing with 460 additions and 109 deletions
components/moblie/containerCard.vue
......@@ -14,9 +14,10 @@
<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 :show-ske="false" width-v="100%" :font-style="[24,104,500,'#999','center']" bg-color-v="#fff">
<span v-tap="handleMore">加载更多</span>
</yun-div>
<yun-div :width-v="750" :height-v="24"></yun-div>
</yun-div>
</template>
......
components/moblie/fansCard.vue
<template>
<yun-div :extend-style="{overflow: 'visible'}">
<yun-div :extend-style="{overflow: 'visible'}" bg-color-v="#fff">
<yun-div
:width-v="704"
:padding-v="[40,0]"
......@@ -38,13 +38,11 @@
:size="10"
:margin-v="[0,0,0,36]"
:style="{width: 'auto', height: 'auto',transition: '0.5s',display: 'inline-block'}"
@click.native="handelShowFollow"
v-tap="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"
......@@ -55,10 +53,10 @@
: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 v-tap="cancelFollow">取消关注</p>
<!-- 根据是否有备注修改这个 p 标签-->
<p :style="{marginTop: commonReturnFlexedLength(30),marginBottom: commonReturnFlexedLength(30)}">添加备注</p>
<p>移除粉丝</p>
<p v-tap="addNote" :style="{marginTop: commonReturnFlexedLength(30),marginBottom: commonReturnFlexedLength(30)}">添加备注</p>
<p v-tap="moveFollow">移除粉丝</p>
</yun-div>
</yun-div>
</yun-div>
......@@ -87,6 +85,15 @@ export default {
methods: {
handelShowFollow() {
this.show = !this.show
},
cancelFollow() {
this.show = false
},
addNote() {
this.show = false
},
moveFollow() {
this.show = false
}
}
}
......
components/moblie/nav.vue
<template>
<yun-div
:height-v="76"
bg-color-v="#fff"
:border-v="[1,'solid','#EFEFEF','bottom']"
:extend-style="{boxShadow: '-18px -2px 20px -23px rgba(0,0,0,.2) inset',overflowX: 'auto'}"
:height-v="76"
bg-color-v="#fff"
:border-v="[1,'solid','#EFEFEF','bottom']"
:extend-style="{overflow: 'visible',position:'relative'}"
>
<yun-div
:width-v="750"
:height-v="96"
:flex-v="['row','flex-start','flex-start']"
:font-style="[28,36,400,'#999','left']"
:extend-style="{overflowX: 'auto'}"
:width-v="610"
:height-v="96"
:ske-h="76"
:ske-w="610"
:margin-v="[0,140,0,0]"
:flex-v="['row','flex-start','flex-start']"
:font-style="[28,36,400,'#999','left']"
:extend-style="{overflowX: 'auto'}"
>
<yun-div
:no-flex-shrink="true"
:padding-v="[20,0,0,40]"
v-for="(item, index) in navList"
:class="{active:index === actived}"
:flex-v="['column','flex-start','center']"
:key="item.label"
:no-flex-shrink="true"
:padding-v="[20,0,0,40]"
v-for="(item, index) in navList"
:class="{active:index === actived}"
:flex-v="['column','flex-start','center']"
:key="item.id"
>
<span @click="toggle(index, item.id)">{{item.label}}</span>
<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>
<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="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>
......@@ -33,74 +77,57 @@ import commonMixin from "./commonMixin";
export default {
mixins: [commonMixin],
props: {
path: String,
navList: Array
},
data() {
return {
actived: 0,
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: '前端',
id: '16'
},
{
label: '前端',
id: '17'
},
{
label: '前端',
id: '18'
},
{
label: '前端',
id: '19'
}
]
sortList: ['热门', '最新'],
showSort: false,
sortWay: '最新'
}
},
mounted() {
this.toggle(this.$route.query.type)
},
watch: {
$route: function () {
this.toggle(this.$route.query.type)
}
},
methods: {
toggle(index, id) {
this.actived = index
this.$router.push({
path: '/test',
query: {
type: id
}
})
toggle(id) {
this.actived = id
},
handleSort() {
this.showSort = !this.showSort
},
handleSortWay(item) {
this.showSort = !this.showSort
this.sortWay = item
}
}
}
</script>
<style lang="scss" scoped>
.active {
color: #333333 !important;
@extend %animate-transition;
}
.nuxt-link-exact-active {
color: #333333 !important;
@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>
dev-schedule__ghj.md
......@@ -5,11 +5,11 @@
+ 话题卡片(1) √
+ 粉丝卡片(1) √
+ 用户卡片小(1) √
+ 登陆页面(2)
+ 注册页面(2)
+ 密码重置页面(2)
+ navigator(3)
+ 项目展示页 /pages/project/index.vue(4)
+ 博客展示页 /pages/blog/index.vue(4)
+ 资讯展示页 /pages/news/index.vue(4)
+ 问答展示页 /pages/answer/index.vue(4)
+ 登陆页面(2) √
+ 注册页面(2) √
+ 密码重置页面(2) √
+ navigator(3) √
+ 项目展示页 /pages/project/index.vue(4) √
+ 博客展示页 /pages/blog/index.vue(4) √
+ 资讯展示页 /pages/news/index.vue(4) √
+ 问答展示页 /pages/answer/index.vue(4) √
pages/answer/index.vue
<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>
pages/blog/index.vue
<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>
pages/news/index.vue
<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>
pages/project/index.vue
<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>
pages/users/login.vue
......@@ -11,7 +11,7 @@
:ske-h="36"
:src="Logo">
</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
:width-v="704"
......@@ -26,9 +26,9 @@
:margin-v="[0,0,56,0]"
: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 :class="{actived: !isPassword}" @click="handleLoginWayTwo">短信登录</span>
<span :class="{actived: !isPassword}" v-tap="handleLoginWayTwo">短信登录</span>
</yun-div>
<yun-input
:key="inputKey"
......@@ -55,7 +55,7 @@
:height-v="86"
:border-r="[8]"
: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 :show-ske="false" v-else>
......@@ -76,7 +76,7 @@
:border-r="[8]"
:font-style="[26,35,500,'#75D098','left']"
:extend-style="{lineHeight:commonReturnFlexedLength(86),position: 'absolute',top: 0,right: 0}"
@click.native="sendSms"
v-tap="sendSms"
>
{{timing}}
</yun-div>
......@@ -95,7 +95,7 @@
<label for="automatic"></label>
<yun-div :margin-v="[0,0,0,16]">下次自动登录</yun-div>
</yun-div>
<yun-div @click.native="toReset">忘记密码</yun-div>
<yun-div v-tap="toReset">忘记密码</yun-div>
</yun-div>
<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%']"
......
pages/users/register.vue
......@@ -11,7 +11,7 @@
:ske-h="36"
:src="Logo">
</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
:width-v="704"
......@@ -26,9 +26,9 @@
:margin-v="[0,0,56,0]"
: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 :class="{actived: !isPhone}" @click="handleLoginWayTwo">邮箱号注册</span>
<span :class="{actived: !isPhone}" v-tap="handleLoginWayTwo">邮箱号注册</span>
</yun-div>
<yun-input
v-if="isPhone"
......@@ -66,7 +66,7 @@
:height-v="86"
:border-r="[8]"
: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 :show-ske="false" v-if="isPhone">
......@@ -87,7 +87,7 @@
:border-r="[8]"
:font-style="[26,35,500,'#75D098','left']"
:extend-style="{lineHeight:commonReturnFlexedLength(86),position: 'absolute',top: 0,right: 0}"
@click.native="sendSms"
v-tap="sendSms"
>
{{timing}}
</yun-div>
......@@ -107,7 +107,7 @@
<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>
<yun-div @click.native="toReset">忘记密码</yun-div>
<yun-div v-tap="toReset">忘记密码</yun-div>
</yun-div>
<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%']"
......
pages/users/reset.vue
......@@ -11,7 +11,7 @@
:ske-h="36"
:src="Logo">
</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
:width-v="704"
......@@ -51,7 +51,7 @@
:height-v="86"
:border-r="[8]"
: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 :show-ske="false">
......@@ -71,7 +71,7 @@
:border-r="[8]"
:font-style="[26,35,500,'#75D098','left']"
:extend-style="{lineHeight:commonReturnFlexedLength(86),position: 'absolute',top: 0,right: 0}"
@click.native="sendSms"
v-tap="sendSms"
>
{{timing}}
</yun-div>
......@@ -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>
<yun-div>
<span @click="toLogin">登录</span>
<span v-tap="toLogin">登录</span>
<span>·</span>
<span @click="toRegister">注册</span>
<span v-tap="toRegister">注册</span>
</yun-div>
</yun-div>
<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