Skip to content

Commit

Permalink
分享组件
Browse files Browse the repository at this point in the history
  • Loading branch information
xiaobinwu committed Apr 18, 2017
1 parent e861946 commit 5f32f7c
Show file tree
Hide file tree
Showing 10 changed files with 161 additions and 21 deletions.
2 changes: 1 addition & 1 deletion account.html
Expand Up @@ -6,7 +6,7 @@
<meta name="description" content="吾记APP官方网页版,实时与手机上的吾记APP同步,方便快捷记录">
<meta name="keywords" content="吾记网页版,吾记官网,吾记电脑版,吾记,吾记APP">
<title></title>
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/wuji/dist/css/accountIndex.css">
</head>
<body>
Expand Down
12 changes: 8 additions & 4 deletions assets/component/footer.vue
@@ -1,12 +1,14 @@
<template lang="jade">
div.footer(:class="{fixed: isFixed}")
div.left-section 不知道写什么
div.center-section Copyright © 2017 吾记
div.right-section 不知道写什么
div.left-section
share
div.center-section Copyright © 2015 - 2017 吾记v1.0
div.right-section 粤ICP备17034106号
</template>
<script>
import Vue from 'vue'
import Browser from 'utils/browser'
import share from './share'
export default{
name: 'footer',
data(){
Expand All @@ -28,7 +30,9 @@
}
}
},
components: {}
components: {
share
}
}
</script>
<style lang="sass">
Expand Down
131 changes: 131 additions & 0 deletions assets/component/share.vue
@@ -0,0 +1,131 @@
<template lang="jade">
div.social-share
a.social-share-icon.icon-weibo(target="_blank", :href="'http://service.weibo.com/share/share.php?url='+ url +'&title='+ title +'&pic='+ image + '&appkey=' + weiboKey")
i.fa.fa-weibo
a.social-share-icon.icon-wechat(href="#")
i.fa.fa-weixin
a.social-share-icon.icon-qq(target="_blank", :href="'http://connect.qq.com/widget/shareqq/index.html?url=' + url + '&title=' + title + '&source=' + source + '&desc=' + description + '&pics=' + image")
i.fa.fa-qq
a.social-share-icon.icon-qzone(target="_blank", :href="'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + url + '&title=' + title + '&desc=' + description + '&summary=' + summary + '&site=' + source")
i.fa.fa-qq

</template>
<script>
import Vue from 'vue'
export default{
name: 'share',
props:{
url: {
type: String,
default: location.href
},
title: {
type: String,
default: (document.getElementsByName('title')[0] || 0).content || document.title
},
image: {
type: String,
default: (document.images[0] || 0).src || ''
},
description:{
type: String,
default: (document.getElementsByName('description')[0] || 0).content || ''
},
summary: {
type: String,
default: ''
},
source: {
type: String,
default: location.href
},
weiboKey: {
type: String,
default: ''
}
},
components: {}
}
</script>
<style lang="sass">
@import "../public/scss/_variables.scss";
.social-share {
font-family:"socialshare" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
* {
font-family:"socialshare" !important;
}
a {
position:relative;
text-decoration:none;
margin: 4px;
display:inline-block;
outline: none;
}
.social-share-icon {
position:relative;
display:inline-block;
width: 32px;
height: 32px;
font-size: 20px;
border-radius: 50%;
line-height: 32px;
border:1px solid #666;
color: #666;
text-align: center;
vertical-align: middle;
transition: background 0.6s ease-out 0s;
&:hover{
background: #666;
color: #fff;
}
}
.icon-weibo{
color:#ff763b;border-color:#ff763b;
&:hover{
background:#ff763b;
}
}
.icon-qq{
color:#56b6e7;border-color:#56b6e7;
&:hover{
background:#56b6e7;
}
}
.icon-qzone{
color:#FDBE3D;border-color:#FDBE3D;
&:hover{
background:#FDBE3D;
}
}
.icon-wechat{
position:relative;color:#7bc549;border-color:#7bc549;
&:hover{
background:#7bc549;
}
}
.icon-wechat .wechat-qrcode{display: none;border: 1px solid #eee;position:absolute;z-index:9;top:-205px;left:-84px;width:200px;height:192px;color:#666;font-size:12px;text-align:center;background-color:#fff;box-shadow:0 2px 10px #aaa;transition:all 200ms;-webkit-tansition:all 350ms;-moz-transition:all 350ms; }
.icon-wechat .wechat-qrcode.bottom {
top:40px;
left:-84px;
&:after {
display:none;
}
}
.icon-wechat .wechat-qrcode h4{font-weight:normal;height:26px;line-height:26px;font-size:12px; background-color:#f3f3f3; margin:0;padding:0;color: #777; }
.icon-wechat .wechat-qrcode .qrcode{width:105px; margin:10px auto;}
.icon-wechat .wechat-qrcode .qrcode table{margin:0!important;}
.icon-wechat .wechat-qrcode .help p{font-weight:normal;line-height:16px;padding:0;margin:0;}
.icon-wechat .wechat-qrcode:after{content:'';position:absolute;left:50%;margin-left:-6px;bottom:-13px;width:0;height:0;border-width:8px 6px 6px 6px;border-style:solid;border-color:#fff transparent transparent transparent}
.icon-wechat:hover .wechat-qrcode{display: block;}
}
</style>
25 changes: 15 additions & 10 deletions assets/modules/diary/detail.vue
Expand Up @@ -4,8 +4,11 @@
div.wuji-category
{{diary.categoryName}}
div.wuji-operate
i.fa.fa-trash-o(@click="del")
i.fa.fa-pencil-square-o(@click="edit")
i.el-icon-delete(@click="del")
i.el-icon-edit(@click="edit")
el-popover(ref="popover1", placement="bottom", trigger="hover")
i.el-icon-share(slot="reference")
share(:description="description", :title="diary.content.substr(0,20) + '...'", image="http://www.sharewuji.com.img.800cdn.com/assets/images/icon.png")
div.wuji-title
span.date {{diary.createDate | date}}
span.time {{diary.createDate | time}}
Expand Down Expand Up @@ -39,25 +42,27 @@
import weekday from 'config/weekday'
import Browser from 'utils/browser'
import fancyBox from 'component/fancyBox'
import {Message, MessageBox, Card, Row, Col} from 'element-ui'
import share from 'component/share'
import {Message, MessageBox, Card, Row, Col, Popover} from 'element-ui'
Vue.use(Row)
Vue.use(Col)
Vue.use(Card)
Vue.use(Popover)
export default{
name: 'diarydetail',
data(){
return{
diary: null,
position: 0,
visible: false,
checkVideo: Browser.checkVideo()
checkVideo: Browser.checkVideo(),
description: '吾记,属于你的心灵港湾'
}
},
created(){
this.init();
},
mounted(){
console.log(this.$route.query.id);
},
computed:{
styleObject(){
Expand All @@ -79,7 +84,6 @@
//params => 参数
Api.getDiaryDetail(params).then(result => {
_self.diary = result;
console.log(_self.diary)
}).catch(error => {
Message({message: error, type: 'error', showClose: true});
});
Expand Down Expand Up @@ -149,7 +153,8 @@
}
},
components: {
fancyBox
fancyBox,
share
}
}
</script>
Expand All @@ -170,12 +175,12 @@
font-size: $size-h2;
.#{$prefix}-operate{
float: right;
color: $main;
font-size: $size-h3;
.fa{
i{
color: $main;
cursor: pointer;
}
.fa-trash-o{
.el-icon-delete,.el-icon-edit{
margin-right: 20px;
}
}
Expand Down
4 changes: 2 additions & 2 deletions assets/page/diary/index/index.vue
@@ -1,7 +1,7 @@
<template lang="jade">
div.main
Aside(route="journals")
transition(name="slide", mode="out-in", @after-enter="computedBodyHeight")
transition(appear, name="slide", mode="out-in", @after-enter="afterEnter")
router-view
Footer(:body-height="bodyHeight")
</template>
Expand All @@ -22,7 +22,7 @@ export default {
Aside
},
methods:{
computedBodyHeight(){
afterEnter(){
this.bodyHeight = document.querySelector('body').offsetHeight;
}
},
Expand Down
4 changes: 2 additions & 2 deletions assets/page/passing/index/index.vue
@@ -1,7 +1,7 @@
<template lang="jade">
div.main
Aside(route="passing")
transition(name="slide", mode="out-in", @after-enter="computedBodyHeight")
transition(appear, name="slide", mode="out-in", @after-enter="afterEnter")
router-view
Footer(:body-height="bodyHeight")
</template>
Expand All @@ -22,7 +22,7 @@ export default {
Aside
},
methods:{
computedBodyHeight(){
afterEnter(){
this.bodyHeight = document.querySelector('body').offsetHeight;
}
},
Expand Down
Binary file added assets/public/images/dist/shareIcon.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/public/images/shareIcon.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion index.html
Expand Up @@ -6,7 +6,7 @@
<meta name="description" content="吾记APP官方网页版,实时与手机上的吾记APP同步,方便快捷记录">
<meta name="keywords" content="吾记网页版,吾记官网,吾记电脑版,吾记,吾记APP">
<title></title>
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/wuji/dist/css/diaryIndex.css">
</head>
<body>
Expand Down
2 changes: 1 addition & 1 deletion passing.html
Expand Up @@ -6,7 +6,7 @@
<meta name="description" content="吾记APP官方网页版,实时与手机上的吾记APP同步,方便快捷记录">
<meta name="keywords" content="吾记网页版,吾记官网,吾记电脑版,吾记,吾记APP">
<title></title>
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/wuji/dist/css/passingIndex.css">
</head>
<body>
Expand Down

0 comments on commit 5f32f7c

Please sign in to comment.