Skip to content

B
beyond-clouds-frontM
Commit a3660203 by yanju
Options

文章详情页，评论组件

parent 0a022637
Showing with 505 additions and 264 deletions
action/utils/dom.js
......@@ -23,19 +23,28 @@ let fontSelfAdaption=()=>{
let n = t.clientWidth;
n < 320 && (n = 320);
n > 750 && (n = 750);
t.style.fontSize = n / defaultWidth + "px";
window.$nuxt.$store.commit('page/changeRemRate',n/defaultWidth);
};
functionName();
window.addEventListener(eventName, functionName, !1);
}
let hasLongDiv = (el) =>{
let overflowX = el.style?el.style.overflowX:'auto'
if(el.parentNode){
hasLongDiv(el.parentNode)
}
if(el.offsetWidth>750*window.$nuxt.$store.state.page.remRate||overflowX==='scroll'){
return true
}
}
let preventTouchDefault=()=>{
//取得当前滑动开始值
var startX,startY;
document.addEventListener("touchstart",function(e){
startX = e.targetTouches[0].pageX;
startY = e.targetTouches[0].pageY;
});
......@@ -44,10 +53,17 @@ let preventTouchDefault=()=>{
var moveX = e.targetTouches[0].pageX;
var moveY = e.targetTouches[0].pageY;
let flag = false;
flag = hasLongDiv(e.target);
if(Math.abs(moveX-startX)>Math.abs(moveY-startY)){
if(flag){
}else{
e.preventDefault();
}
}
},{passive:false});
}
......
assets/common.scss
......@@ -90,254 +90,6 @@ $easeInOutFunction: cubic-bezier(0.445, 0.05, 0.55, 0.95);
cursor:pointer
}
%markdown{
/*
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
color: #333;
background: #fcfcfc;
}
.hljs-comment,
.hljs-quote {
color: #998;
font-style: italic;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
color: #333;
font-weight: 500;
}
.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr {
color: #008080;
}
.hljs-string,
.hljs-doctag {
color: #d14;
}
.hljs-title,
.hljs-section,
.hljs-selector-id {
color: #900;
font-weight: 500;
}
.hljs-subst {
font-weight: normal;
}
.hljs-type,
.hljs-class .hljs-title {
color: #458;
font-weight: 500;
}
.hljs-tag,
.hljs-name,
.hljs-attribute {
color: #000080;
font-weight: normal;
}
.hljs-regexp,
.hljs-link {
color: #009926;
}
.hljs-symbol,
.hljs-bullet {
color: #990073;
}
.hljs-built_in,
.hljs-builtin-name {
color: #0086b3;
}
.hljs-meta {
color: #999;
font-weight: 500;
}
.hljs-deletion {
background: #fdd;
}
.hljs-addition {
background: #dfd;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: 500;
}
pre {
position: relative;
margin-bottom: 24px;
border-radius: 2px;
border: 1px solid #f6f6f6;
background: #FFF;
overflow: hidden;
}
code {
display: block;
padding: 6px 12px;
overflow-y: auto;
font-weight: 300;
font-family: Menlo, monospace;
font-size: 14px;
}
}
%article-content{
@extend %markdown;
padding:30*$length 0;
word-wrap: break-word;
overflow: hidden;
font-size: 14*$font-size;
*{
word-wrap: break-word;
overflow: auto;
font-size: 14*$font-size;
font-weight: 400;
}
b, strong{
font-weight: bold;
}
li,ul,ol{
list-style: disc inside;
}
ul,ol{
padding-left:40*$length;
line-height: 1.75;
font-weight: 400;
font-size: 15px;
}
h1,h2,h3,h4,h5,h6{
color:#333;
line-height: 1.5;
margin-top: 35px;
margin-bottom: 10px;
}
h1{
padding-bottom: 12px;
font-size: 26px;
line-height: 1.75;
font-weight: 400;
border-bottom: 1px solid #ececec;
}
h2{
padding-bottom: 12px;
font-size: 24px;
line-height: 1.75;
font-weight: 400;
border-bottom: 1px solid #ececec;
}
h3{
padding-bottom: 12px;
font-size: 22px;
line-height: 1.75;
font-weight: 400;
border-bottom: 1px solid #ececec;
}
h4{
padding-bottom: 18px;
font-size: 22px;
line-height: 1.75;
font-weight: 400;
border-bottom: 1px solid #ececec;
}
a{
color:#00AAE6;
}
p{
font-size: 15*$length;
line-height: 1.75;
font-weight: 400;
margin:22*$length 0;
color:#333;
}
li{
font-size: 15*$length;
line-height: 1.75;
font-weight: 400;
margin:11*$length 0;
color:#333;
}
blockquote{
display: block;
border-left: 8*$length solid #d0e5f2;
padding: 5*$length 10*$length;
line-height: 1.4;
font-size: 100%;
background-color: #f1f1f1;
margin:22*$length 0;
}
table{
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
font-size: 14*$font-size;
margin:22*$length 0;
& tbody{
& tr{
}
}
}
code{
width:auto;
}
img,
audio,
video{
max-width: 100%;
height: auto;
}
td {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 3*$length 5*$length;
}
th {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 3*$length 5*$length;
}
}
//文字超出不换行
%nowrap{
......
components/moblie/banner.vue
......@@ -41,7 +41,6 @@
</yun-div>
</yun-div>
<!-- banner-card2-->
<transition name="fade">
<yun-div
v-if="bannerType===2"
:extend-style="{
......@@ -207,9 +206,6 @@
</yun-img>
</yun-div>
</yun-div>
</transition>
......
components/moblie/comment/commentCard1.vue 0 → 100644
<template>
<yun-div
:width-v="699"
:padding-v="[35,0,40]"
:border-v="[1,'solid','#EFEFEF','bottom']"
:flex-v="['row','space-between','flex-start']"
>
<yun-img
:width-v="70"
:height-v="70"
:ske-h="70"
:ske-w="70"
:border-r="[35]"
>
</yun-img>
<yun-div
:width-v="620"
>
<yun-div
:font-style="[24,32,400,'#999','left']"
>
名字ii
</yun-div>
<yun-div
:padding-v="[24,0,0]"
:font-style="[28,40,400,'#333','left']"
:ske-w="350"
>
也制在史长严活利最族空感际见。
</yun-div>
<yun-div
:padding-v="[24,0,0]"
:flex-v="['row','space-between','center']"
>
<yun-div
:font-style="[20,32,400,'#999','left']"
>
3小时前
</yun-div>
<yun-div
:font-style="[20,32,400,'#999','left']"
>
<span >回复</span>
<span :style="{margin:`0 ${5*heightRate}px 0 ${48*heightRate}px` }">赞</span>
</yun-div>
</yun-div>
<yun-div
:padding-v="[24,0,0]"
>
<yun-input
:height-v="60"
:width-v="392"
:border-r="[30]"
:show-alert="false"
:show-icon="false"
placeholder="写点什么"
>
</yun-input>
</yun-div>
<yun-div
:width-v="620"
:border-r="[4]"
:margin-v="[24,0,0]"
>
<card2></card2>
</yun-div>
</yun-div>
</yun-div>
</template>
<script>
import commonMixin from "../commonMixin";
import Card2 from './commentCard2';
export default {
mixins:[commonMixin],
components:{
Card2
}
}
</script>
components/moblie/comment/commentCard2.vue 0 → 100644
<template>
<yun-div
:width-v="620"
:padding-v="[24,27]"
:border-v="[1,'solid','#EFEFEF','bottom']"
:extend-style="{
boxSizing:'border-box'
}"
bg-color-v="#F4F8FA"
:flex-v="['row','space-between','flex-start']"
>
<yun-img
:width-v="70"
:height-v="70"
:ske-h="70"
:ske-w="70"
:border-r="[35]"
>
</yun-img>
<yun-div
:width-v="488"
>
<yun-div
:font-style="[24,32,400,'#999','left']"
>
名字ii
</yun-div>
<yun-div
:padding-v="[24,0,0]"
:font-style="[28,40,400,'#333','left']"
:ske-w="350"
>
也制在史长严活利最族空感际见。
</yun-div>
<yun-div
:padding-v="[24,0,0]"
width-v="100%"
:flex-v="['row','space-between','center']"
>
<yun-div
:font-style="[20,32,400,'#999','left']"
>
3小时前
</yun-div>
<yun-div
:font-style="[20,32,400,'#999','right']"
>
<span >回复</span>
<span :style="{margin:`0 ${5*heightRate}px 0 ${48*heightRate}px` }">赞</span>
</yun-div>
</yun-div>
<yun-div
:padding-v="[24,0,0]"
>
<yun-input
:height-v="60"
:width-v="392"
:border-r="[30]"
:show-alert="false"
:show-icon="false"
placeholder="写点什么"
bg-color-v="#fff"
>
</yun-input>
</yun-div>
<yun-div
:width-v="488"
:extend-style="{
boxSizing:'border-box'
}"
>
<card3></card3>
</yun-div>
</yun-div>
</yun-div>
</template>
<script>
import commonMixin from "../commonMixin";
import Card3 from './commentCard3';
export default {
mixins:[commonMixin],
components:{
Card3
}
}
</script>
components/moblie/comment/commentCard3.vue 0 → 100644
<template>
<yun-div
:width-v="488"
:padding-v="[24,27]"
:border-v="[1,'solid','#EFEFEF','bottom']"
:extend-style="{
boxSizing:'border-box'
}"
bg-color-v="#F4F8FA"
:flex-v="['row','space-between','flex-start']"
>
<yun-img
:width-v="70"
:height-v="70"
:ske-h="70"
:ske-w="70"
:border-r="[35]"
>
</yun-img>
<yun-div
:width-v="356"
>
<yun-div
:font-style="[24,32,400,'#999','left']"
>
名字ii
</yun-div>
<yun-div
:padding-v="[24,0,0]"
:font-style="[28,40,400,'#333','left']"
:ske-w="350"
>
也制在史长严活利最族空感际见。
</yun-div>
<yun-div
:padding-v="[24,0,0]"
width-v="100%"
:flex-v="['row','space-between','center']"
>
<yun-div
:font-style="[20,32,400,'#999','left']"
>
3小时前
</yun-div>
<yun-div
:font-style="[20,32,400,'#999','right']"
>
<span :style="{margin:`0 ${5*heightRate}px 0 ${48*heightRate}px` }">赞</span>
</yun-div>
</yun-div>
</yun-div>
</yun-div>
</template>
<script>
import commonMixin from "../commonMixin";
export default {
mixins:[commonMixin],
}
</script>
components/moblie/comment/commentCon.vue 0 → 100644
<template>
<yun-div
:extend-style="{
position:'fixed',
zIndex:headerZIndex,
maxWidth:750*heightRate+'px'
}"
:margin-v="[0,'auto']"
:position-v="[88,0,0,0]"
>
<yun-div
bg-color-v="#fff"
height-v="100%"
:position-v="[0,0,undefined,0]"
:padding-v="[0,paddingL]"
:extend-style="{
position:'absolute',
zIndex:headerZIndex+1,
boxSizing: 'border-box',
overflow:'scroll'
}"
>
<yun-div
width-v="100%"
:height-v="85"
:font-style="[26,85,400,'#666','left']"
:show-ske="false"
>
全部回答（234）
</yun-div>
</yun-div>
<yun-div
bg-color-v="#fff"
:position-v="[85,0,97,0]"
:padding-v="[0,paddingL]"
:extend-style="{
position:'absolute',
zIndex:headerZIndex+1,
boxSizing: 'border-box',
overflow:'scroll'
}"
>
<card1 v-for="val in 5"></card1>
</yun-div>
<yun-div
bg-color-v="#fff"
width-v="100%"
:extend-style="{
position:'absolute',
zIndex:headerZIndex+1,
boxSizing: 'border-box'
}"
:border-v="[1,'solid','#efefef','top']"
:position-v="[undefined,0,0,0]"
>
<send-box></send-box>
</yun-div>
</yun-div>
</template>
<script>
import sendBox from '../commentCard'
import commonMixin from "../commonMixin";
import Card1 from './commentCard1'
export default {
mixins:[ commonMixin],
components:{
sendBox,Card1
}
}
</script>
components/moblie/commentCard.vue 0 → 100644
<template>
<yun-div
:height-v="96"
bg-color-v="#fff"
:padding-v="[0,34]"
:extend-style="{
boxSizing:'border-box'
}"
width-v="100%"
:flex-v="['row','space-between','center']"
>
<yun-input
:height-v="60"
:width-v="392"
:border-r="[30]"
:show-alert="false"
:show-icon="false"
placeholder="写点什么"
>
</yun-input>
<yun-div
:height-v="60"
:flex-v="['row','flex-end','center']"
>
<yun-div
:height-v="60"
:flex-v="['column','flex-space','center']"
>
<yun-div
:font-style="[20,30,400,'#999','center']"
:show-ske="false"
:height-v="30"
>
<yun-icon name="view"
:size="20"
color="#ccc"
></yun-icon>
</yun-div>
<yun-div
:font-style="[20,25,400,'#999','center']"
:show-ske="false"
>
12
</yun-div>
</yun-div>
<yun-div
:margin-v="[0,0,0,60]"
:height-v="60"
:flex-v="['column','flex-space','center']"
>
<yun-div
:font-style="[20,30,400,'#999','center']"
:show-ske="false"
:height-v="30"
>
<yun-icon name="comment"
:size="20"
color="#ccc">
</yun-icon>
</yun-div>
<yun-div
:font-style="[20,25,400,'#999','center']"
:show-ske="false"
>
12
</yun-div>
</yun-div>
<yun-div
:margin-v="[0,0,0,60]"
:height-v="60"
:flex-v="['column','flex-space','center']"
>
<yun-div
:font-style="[20,30,400,'#999','center']"
:show-ske="false"
:height-v="30"
>
<yun-icon name="like1"
:size="20"
color="#ccc"></yun-icon>
</yun-div>
<yun-div
:font-style="[20,25,400,'#999','center']"
:show-ske="false"
>
12
</yun-div>
</yun-div>
</yun-div>
</yun-div>
</template>
<script>
export default {
name:'comment-card',
}
</script>
components/moblie/dynamicCard.vue
......@@ -146,7 +146,6 @@
<!-- 两到四张-->
<yun-div
:border-r="[4]"
:padding-v="[28,0,0]"
:flex-v="['row','flex-start','center']"
......@@ -179,7 +178,6 @@
</yun-div>
</yun-div>
<!-- 四张以上-->
<yun-div
:border-r="[4]"
......
components/moblie/userCardX.vue
......@@ -2,14 +2,14 @@
<yun-slider>
<yun-div
:width-v="704"
:padding-v="[40,0,40]"
:padding-v="paddingV"
bg-color-v="#fff"
:margin-v="[0,'auto']"
:flex-v="['row','flex-start','center']"
:border-v="[1,'solid','#EFEFEF','bottom']"
:flex-v="['row','space-between','center']"
:border-v="[showBorder?1:0,'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-img :src="imgSrc" :ske-w="avatarSize" :ske-h="avatarSize" :width-v="avatarSize" :height-v="avatarSize" :border-r="['50%']"></yun-img>
<yun-div :width-v="588" :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>
......@@ -33,6 +33,23 @@ export default {
isLogin: false
}
},
props:{
avatarSize:{
default:90,
type:Number,
},
showBorder:{
default:true,
type:Boolean,
},
paddingV:{
default:()=>([40,0]),
type:Array,
}
},
methods: {
handelFocus() {
this.focus = !this.focus
......
nuxt.config.js
......@@ -17,6 +17,11 @@ module.exports = {
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
],
script: [
{
src:"/js/flexible.js", type: 'text/javascript', charset: 'utf-8'
}
]
},
/*
......
package.json
......@@ -20,6 +20,7 @@
"koa": "^2.6.2",
"node-sass": "^4.13.1",
"nuxt": "^2.0.0",
"postcss-pxtorem": "^5.1.1",
"sass-loader": "^8.0.2",
"vue-socket.io": "^3.0.7",
"vue-touch": "^2.0.0-beta.4"
......
pages/dynamic/index.vue
<template>
<yun-slider>
<yun-div
slot="card"
>
<nav-bar :path="path" :nav-list="navList"></nav-bar>
<dynamic-card></dynamic-card>
......@@ -10,7 +8,6 @@
<dynamic-card></dynamic-card>
<dynamic-card></dynamic-card>
</yun-div>
</yun-slider>
</template>
<script>
......
static/js/flexible.js 0 → 100644
;(function () {
let e = document,
t = e.documentElement,
defaultWidth = 750,
eventName = "orientationchange" in window ? "orientationchange" : "resize";
let functionName = function () {
let n = t.clientWidth;
n < 320 && (n = 320);
n > 750 && (n = 750);
t.style.fontSize = n / defaultWidth + "px";
};
functionName();
window.addEventListener(eventName, functionName, !1);
})()
yarn.lock
......@@ -7696,6 +7696,13 @@ postcss-pseudo-class-any-link@^6.0.0:
postcss "^7.0.2"
postcss-selector-parser "^5.0.0-rc.3"
postcss-pxtorem@^5.1.1:
version "5.1.1"
resolved "https://registry.yarnpkg.com/postcss-pxtorem/-/postcss-pxtorem-5.1.1.tgz#198a68c10f9ad2d42370ef66299d7b3168f8cffa"
integrity sha512-uvgIujL/pn0GbZ+rczESD2orHsbXrrCqi+q9wJO8PCk3ZGCoVVtu5hZTbtk+tbZHZP5UkTfCvqOrTZs9Ncqfsg==
dependencies:
postcss "^7.0.27"
postcss-reduce-initial@^4.0.3:
version "4.0.3"
resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz#7fd42ebea5e9c814609639e2c2e84ae270ba48df"
......
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