Skip to content

Commit

Permalink
coversation
Browse files Browse the repository at this point in the history
  • Loading branch information
unknown committed Apr 5, 2017
1 parent ffe906d commit dec5652
Show file tree
Hide file tree
Showing 8 changed files with 510 additions and 146 deletions.
67 changes: 65 additions & 2 deletions index.html

Large diffs are not rendered by default.

229 changes: 229 additions & 0 deletions src/components/findandMe/findandMe.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,229 @@
<template>
<section>

<section class="find">
<router-link to="" class="findlist">
<div class="find_wipe">
<div class="findlist_left">
<section class="findlist_svg " :class="{'findlist_svg_me' : $route.path.indexOf('me') !== -1}">
<img src="../../images/chen.jpg" alt="" v-if="pathUrl">
<svg v-else>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#friendcircle"></use>
</svg>
</section>
<section class="me_name" v-if="pathUrl">
<div>辰</div>
<div>微信号:xulianjie442154157</div>
</section>
<section class="findlist_text" v-else>
朋友圈
</section>
</div>
<div class="findlist_right">
<svg fill="#949494" v-if="pathUrl">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#QRcode"></use>
</svg>
<div v-else>
<img src="../../images/tao.jpg" alt="">
<i class="redicon" v-if="newtext"></i>
</div>
</div>
</div>
</router-link>
<router-link to="" class="findlist">
<div class="find_wipe">
<div class="findlist_left">
<section class="findlist_svg">
<svg fill="#10aeff">
<use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href=" pathUrl ? '#photo' : '#onesweeptwo'"></use>
</svg>
</section>
<section class="findlist_text" >
<span v-if="pathUrl">相册</span>
<span v-else>扫一扫</span>
</section>
</div>
</div>
<div class="find_wipe">
<div class="findlist_left">
<section class="findlist_svg">
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href=" pathUrl ? '#collect' : '#shark' "></use>
</svg>
</section>
<section class="findlist_text">
<span v-if="pathUrl">收藏</span>
<span v-else>摇一摇</span>
</section>
</div>
</div>
</router-link>
<router-link to="" class="findlist">
<div class="find_wipe">
<div class="findlist_left">
<section class="findlist_svg">
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href=" pathUrl ? '#burse' : '#nearby'"></use>
</svg>
</section>
<section class="findlist_text">
<span v-if="pathUrl">钱包</span>
<span v-else>附近的人</span>
</section>
</div>
</div>
</router-link>
<router-link to="" class="findlist">
<div class="find_wipe">
<div class="findlist_left">
<section class="findlist_svg">
<svg data-v-38f704c5="" fill="#10aeff">
<use data-v-38f704c5="" xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="pathUrl ? '#cardbag' : '#shopping'"></use>
</svg>
</section>
<section class="findlist_text">
<span v-if="pathUrl">卡包</span>
<span v-else>购物</span>
</section>
</div>
</div>
<div class="find_wipe">
<div class="findlist_left">
<section class="findlist_svg">
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="pathUrl ? '#smile' : '#games' "></use>
</svg>
</section>
<section class="findlist_text">
<span v-if="pathUrl">表情</span>
<span v-else>游戏</span>
</section>
</div>
</div>
</router-link>
<router-link to="" class="findlist">
<div class="find_wipe">
<div class="findlist_left">
<section class="findlist_svg">
<svg fill="#7586db">
<use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="pathUrl ? '#set' : '#small' "></use>
</svg>
</section>
<section class="findlist_text">
<span v-if="pathUrl">设置</span>
<span v-else>小程序</span>

</section>
</div>
</div>
</router-link>
</section>

</section>
</template>

<script>
export default{
data(){
return{
newtext:true,
pathUrl:this.$route.path.indexOf("me") !== -1,
}
},
props: ['mepart',],
created(){
},
mounted(){
},
components:{
},
computed:{
},
methods:{
}
}
</script>
<style lang="scss" scoped>
@import "../../style/public";
.find{
padding-top:3.06933rem;
padding-bottom:2.28267rem;
.findlist{
padding:0 0.8533333333rem;
background:#fff;
display:block;
margin-bottom:1rem;
.find_wipe{
@include justify;
align-items:center;
padding-bottom:0.2533333333rem;
padding-top:0.2533333333rem;
border-bottom:1px solid #e0e0e0;
.findlist_left{
@include justify(flex-start);
align-items:center;
.findlist_svg{
@include widthHeight(1.408rem,1.408rem);
svg{
@include widthHeight(100%,100%);
}
}
.findlist_svg_me{
@include widthHeight(2.7306666667rem,2.7306666667rem);
img{
@include widthHeight(100%,100%);
}
}
.findlist_text{
@include sizeColor(0.64rem,#2a2a2a);
margin-left:.6rem;
span{
display:block;
@include sizeColor(0.64rem,#2a2a2a);
}
}
.me_name{
@include sizeColor(0.64rem,#969696);
margin-left:.6rem;
div:nth-of-type(1){
color:#333;
margin-bottom:0.2133333333rem;
}
}
}
.findlist_right{
position: relative;
@include widthHeight(1.6rem,1.6rem);
@include align;
img{
display:block;
@include widthHeight(100%,100%);
}
.redicon{
position: absolute;
right:-0.21rem;
top:-0.21rem;
@include widthHeight(0.4266666667rem,0.4266666667rem);
@include bg('../../images/warn.png');
border-radius:50%;
}
svg{
@include widthHeight(1rem,1rem);
}
}
}
.find_wipe:last-child{
border:0;
}
}
}
</style>
41 changes: 39 additions & 2 deletions src/components/header/head.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,21 @@
<template>
<header>
<section class="logoPart" v-if="logoPart">微信</section>
<section class="logoPart" v-if="logoPart">
微信
</section>
<section class="logoPart" v-if="crossover">
<section class="goback" @click="$router.go(-1)">
<svg fill="#fff">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#back"></use>
</svg>
</section>
<section class="wall">|</section>
<section class="covers_name">
<span class="ellipsis">
{{crossover}}
</span>
</section>
</section>
<section class="searchPart" v-if="searchPart">
<router-link to='' class="searchlink">
<svg class="icon-search">
Expand All @@ -13,6 +28,7 @@
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#add"></use>
</svg>
</section>

<section class="selectpart" v-show="addthing">
<div class="cover" @click="controlhide"></div>
<div class="selectlist">
Expand Down Expand Up @@ -70,6 +86,7 @@
</ul>
</div>
</section>
<slot name='person'></slot>
</header>
</template>

Expand All @@ -81,7 +98,7 @@
addthing:false,
}
},
props: ['logoPart', 'searchPart', 'add'],
props: ['logoPart', 'crossover', 'searchPart', 'add', 'person'],
created(){
},
Expand Down Expand Up @@ -115,6 +132,26 @@
@include topcenter;
@include sizeColor(0.704rem,#fff);
left:0.5973333333rem;
@include justify(flex-start);
align-items:center;
.goback{
@include widthHeight(1rem,1rem);
svg{
@include widthHeight(100%,100%);
}
}
.wall{
margin:0 0.5333333333rem;
@include sizeColor(1.0666666667rem,#2e3235);
}
.covers_name{
span{
@include sizeColor(0.704rem,#fff);
display:block;
width:9.5rem;
}
}
}
.searchPart{
@include topcenter;
Expand Down
81 changes: 81 additions & 0 deletions src/frames/dialogue/conversation/conversation.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<template>
<section class="child_page">
<head-top crossover="我的名字" person="true">
<section class="coversPart" slot="person">
<router-link to='' class="person_link">
<svg class="icon-search">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#person"></use>
</svg>
</router-link>
</section>
</head-top>
<section class="coversation">
对话
</section>
<transition name="router-show">
<router-view></router-view>
</transition>
</section>
</template>

<script>
import headTop from '../../../components/header/head'
export default{
data(){
return{
}
},
created(){
},
mounted(){
},
components:{
headTop,
},
computed:{
},
methods:{
}
}
</script>
<style lang="scss" scoped>
@import "../../../style/public";
.router-show-enter-active,.router-show-leave-active{
transition: all .4s;
}
.router-show-enter,.router-show-leave{
transform:translateX(100%)
}
.child_page{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 203;
background-color: #ebebeb;
}
.coversPart{
@include topcenter;
right:0.5973333333rem;
@include widthHeight(0.8533333333rem,0.8533333333rem);
.person_link{
display:block;
@include widthHeight(0.8533333333rem,0.8533333333rem);
svg{
@include widthHeight(100%,100%);
}
}
}
.coversation{
padding-top: 2.06933rem;
}
</style>
Loading

0 comments on commit dec5652

Please sign in to comment.