This commit is contained in:
asd 2019-11-26 11:55:00 +08:00
commit 78ba4ca709
7 changed files with 376 additions and 126 deletions

View File

@ -1,70 +1,75 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="./normalize.css">
<script>
//designWidth:设计稿的实际宽度值,需要根据实际设置
//maxWidth:制作稿的最大宽度值,需要根据实际设置
//这段js的最后面有两个参数记得要设置一个为设计稿实际宽度一个为制作稿最大宽度例如设计稿为750最大宽度为750则为(750,750)
;(function(designWidth, maxWidth) {
var doc = document,
win = window,
docEl = doc.documentElement,
remStyle = document.createElement("style"),
tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
maxWidth = maxWidth || 540;
width>maxWidth && (width=maxWidth);
var rem = width * 100 / designWidth;
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
}
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(remStyle);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(remStyle);
doc.write(wrap.innerHTML);
wrap = null;
}
//要等 wiewport 设置好后才能执行 refreshRem不然 refreshRem 会执行2次
refreshRem();
win.addEventListener("resize", function() {
clearTimeout(tid); //防止执行两次
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) { // 浏览器后退的时候重新计算
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function(e) {
doc.body.style.fontSize = "16px";
}, false);
}
})(750, 1024);
</script>
<title>falv</title>
</head>
<body>
<noscript>
<strong>We're sorry but falv doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="./normalize.css">
<script>
//designWidth:设计稿的实际宽度值,需要根据实际设置
//maxWidth:制作稿的最大宽度值,需要根据实际设置
//这段js的最后面有两个参数记得要设置一个为设计稿实际宽度一个为制作稿最大宽度例如设计稿为750最大宽度为750则为(750,750)
; (function (designWidth, maxWidth) {
var doc = document,
win = window,
docEl = doc.documentElement,
remStyle = document.createElement("style"),
tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
maxWidth = maxWidth || 540;
width > maxWidth && (width = maxWidth);
var rem = width * 100 / designWidth;
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
}
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(remStyle);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(remStyle);
doc.write(wrap.innerHTML);
wrap = null;
}
//要等 wiewport 设置好后才能执行 refreshRem不然 refreshRem 会执行2次
refreshRem();
win.addEventListener("resize", function () {
clearTimeout(tid); //防止执行两次
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener("pageshow", function (e) {
if (e.persisted) { // 浏览器后退的时候重新计算
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function (e) {
doc.body.style.fontSize = "16px";
}, false);
}
})(750, 1024);
</script>
<script src="./jquery-3.4.1.min.js"></script>
<title>falv</title>
</head>
<body>
<noscript>
<strong>We're sorry but falv doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

2
public/jquery-3.4.1.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -3,6 +3,10 @@
<div class="line"></div>
<p class="question">有哪些击中你内心阴暗处的句子</p>
<div class="line"></div>
<follow :indexs="0"></follow>
<div class="line"></div>
<follow :indexs="1"></follow>
<div class="line"></div>
<p class="title">相关推荐</p>
<div class="recommend">
<div>
@ -17,29 +21,27 @@
<!-- <p class="articlecontent">在信息唾手可得的时代拉开人与人差距的不是知识含</p> -->
<div class="author">汉王的文章 · 556 赞同</div>
</div>
<img src="./assets/tuijian.png" alt="" class="pic">
<img src="./assets/tuijian.png" alt class="pic" />
</div>
<div class="recommend">
<div class="recommend">
<div>
<p class="articlename">阅读时间有限还要把精力花在摘抄上吗</p>
<!-- <p class="articlecontent">在信息唾手可得的时代拉开人与人差距的不是知识含</p> -->
<div class="author">汉王的文章 · 556 赞同</div>
</div>
<img src="./assets/tuijian.png" alt="" class="pic">
<img src="./assets/tuijian.png" alt class="pic" />
</div>
<p class="title">热门推荐</p>
<p class="title">热门推荐</p>
<div class="recommend">
<div>
<p class="articlename">丧后即燃李松蔚认知升级 16 </p>
<div class="author">李松蔚的私家课 · 共18</div>
<div class="pics">
<img src="./assets/tuijian.png" alt="" class="picture">
<img src="./assets/tuijian.png" alt="" class="picture">
<img src="./assets/tuijian.png" alt="" class="picture">
<img src="./assets/tuijian.png" alt class="picture" />
<img src="./assets/tuijian.png" alt class="picture" />
<img src="./assets/tuijian.png" alt class="picture" />
</div>
</div>
</div>
<div class="recommend">
@ -48,21 +50,30 @@
<!-- <p class="articlecontent">在信息唾手可得的时代拉开人与人差距的不是知识含</p> -->
<div class="author">汉王的文章 · 556 赞同</div>
</div>
<img src="./assets/tuijian.png" alt="" class="pic">
<img src="./assets/tuijian.png" alt class="pic" />
</div>
<div class="recommend">
<div class="recommend">
<div>
<p class="articlename">阅读时间有限还要把精力花在摘抄上吗</p>
<!-- <p class="articlecontent">在信息唾手可得的时代拉开人与人差距的不是知识含</p> -->
<div class="author">汉王的文章 · 556 赞同</div>
</div>
<img src="./assets/tuijian.png" alt="" class="pic">
<img src="./assets/tuijian.png" alt class="pic" />
</div>
</div>
</template>
<script>
export default {};
import follow from "./components/indexFollow";
export default {
name: "IndexArticleDetail",
data() {
return {};
},
components: {
follow
}
};
</script>
<style lang="scss">
@ -114,20 +125,20 @@ export default {};
margin-top: 0.14rem;
margin-bottom: 0.35rem;
}
.pic{
width: 1.82rem;
height: 1.2rem;
margin: auto 0;
.pic {
width: 1.82rem;
height: 1.2rem;
margin: auto 0;
}
.pics{
display: flex;
justify-content: center;
margin-bottom: 0.31rem;
>img{
width: 2.23rem;
height: 1.47rem;
margin-right: 0.1rem
}
.pics {
display: flex;
justify-content: center;
margin-bottom: 0.31rem;
> img {
width: 2.23rem;
height: 1.47rem;
margin-right: 0.1rem;
}
}
}
</style>

View File

@ -1,36 +1,38 @@
<template>
<div class="PersonafFollow">
<div class="center">舆论之于司法利大于弊还是弊大于利</div>
<div class="answer">
<div class="content">
<img src alt srcset />
<p>
这取决于司法是否独立舆论能影响司法判决结果的只能说明司法肯定不仅仅收到舆论的影响还会收到同样的来自其他多方面的强力的影响这种情况只能说明这取决于司法是否独立舆论能影响司法判决结果的只能说明司法肯定不仅仅收到舆论的影响还会收到同样的来自其他多方面的强力的影响这种情况只能说明
</p>
<img class="img" src alt srcset />
<p>这取决于司法是否独立舆论能影响司法判决结果的只能说明司法肯定不仅仅收到舆论的影响还会收到同样的来自其他多方面的强力的影响这种情况只能说明这取决于司法是否独立舆论能影响司法判决结果的只能说明司法肯定不仅仅收到舆论的影响还会收到同样的来自其他多方面的强力的影响这种情况只能说明</p>
</div>
<div class="operation">
<div>
<img src="../assets/share.png" alt="" srcset="">
分享
</div>
<div>
<img src="../assets/share.png" alt="" srcset="">
888评论
</div>
<div>
<div>
<img src="../assets/share.png" alt srcset />
分享
</div>
<div>
<img src="../assets/share.png" alt srcset />
888评论
</div>
<div class="more" @click="show = !show">
<div></div>
<div></div>
<div></div>
<div class="eject" v-show="show">
<p>举报</p>
<p>没有帮助</p>
</div>
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.PersonafFollow {
// padding: 0px 0 39px 0;
// border-bottom: 1px solid #dfdfdf;
box-shadow:0px 2px 2px 0px rgba(237,237,237,0.4);
// padding: 0px 0 39px 0;
// border-bottom: 1px solid #dfdfdf;
box-shadow: 0px 2px 2px 0px rgba(237, 237, 237, 0.4);
width: 690px;
padding: 53px 30px 40px 30px;
background-color: #fff;
@ -77,7 +79,7 @@ box-shadow:0px 2px 2px 0px rgba(237,237,237,0.4);
color: #95998f;
}
.content {
> img {
.img {
width: 690px;
height: 374px;
background-color: #000;
@ -95,20 +97,76 @@ box-shadow:0px 2px 2px 0px rgba(237,237,237,0.4);
font-size: 26px;
}
}
.operation{
.operation {
display: flex;
margin-top: 30px;
> div {
margin-right: 60px;
font-size: 22px;
color: #95998f;
> img {
width: 17px;
height: 17px;
margin-right: 11px;
}
}
.more {
display: flex;
margin-top: 30px;
>div{
margin-right: 60px;
width: 33px;
height: 22px;
justify-content: space-between;
align-items: center;
position: relative;
> div {
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #95998f;
}
> div:last-child {
border-radius: 4px;
border: 2px solid rgba(223, 223, 223, 1);
width: 130px;
height: 101px;
position: absolute;
top: 55px;
background-color: #FFFFFF;
left: -50px;
display: flex;
flex-direction: column;
justify-content: space-around;
padding-left: 20px;
box-sizing: border-box;
>p{
font-size: 22px;
color: #95998F;
>img{
width: 17px;
height: 17px;
margin-right: 11px;
}
}
&::after {
position: absolute;
top: -10px;
left: 58px;
content: "";
width: 0;
height: 0;
border-right: 7px solid transparent;
border-bottom: 10px solid #FFFFFF;
border-left: 7px solid transparent;
}
&::before {
position: absolute;
top: -12px;
left: 55px;
content: "";
width: 0;
height: 0;
border-right: 10px solid transparent;
border-bottom: 11px solid rgba(223, 223, 223, 1);
border-left: 10px solid transparent;
}
}
}
}
}
}
@ -117,7 +175,9 @@ box-shadow:0px 2px 2px 0px rgba(237,237,237,0.4);
export default {
name: "PersonafFollow",
data() {
return {};
return {
show:false
};
}
};
</script>

View File

@ -38,7 +38,7 @@
</template>
<style lang="scss" scoped>
.PersonafFollow {
padding: 49px 0 39px 0;
padding: 0 0 39px 0;
border-bottom: 1px solid #dfdfdf;
.title {
display: flex;

View File

@ -12,7 +12,7 @@
</template>
<style lang="scss" scoped>
.PersonalAnswer {
padding: 49px 0 39px 0;
padding: 0 0 39px 0;
border-bottom: 1px solid #dfdfdf;
.title {
display: flex;

View File

@ -0,0 +1,172 @@
<template>
<div class="PersonafFollow">
<div class="answer">
<div class="user">
<img src="http://q1.qlogo.cn/g?b=qq&nk=1162963624&s=5" alt srcset />
<div>
<p>啦啦啦</p>
<p>律师</p>
</div>
</div>
<div class="agree">1345人赞同了该回答</div>
<div class="content" style="max-height: 6.1rem;">
<img src alt srcset />
<p>这取决于司法是否独立舆论能影响司法判决结果的只能说明司法肯定不仅仅收到舆论的影响还会收到同样的来自其他多方面的强力的影响这种情况只能说明这取决于司法是否独立舆论能影响司法判决结果的只能说明司法肯定不仅仅收到舆论的影响还会收到同样的来自其他多方面的强力的影响这种情况只能说明这取决于司法是否独立舆论能影响司法判决结果的只能说明司法肯定不仅仅收到舆论的影响还会收到同样的来自其他多方面的强力的影响这种情况只能说明这取决于司法是否独立舆论能影响司法判决结果的只能说明司法肯定不仅仅收到舆论的影响还会收到同样的来自其他多方面的强力的影响这种情况只能说明这取决于司法是否独立舆论能影响司法判决结果的只能说明司法肯定不仅仅收到舆论的影响还会收到同样的来自其他多方面的强力的影响这种情况只能说明这取决于司法是否独立舆论能影响司法判决结果的只能说明司法肯定不仅仅收到舆论的影响还会收到同样的来自其他多方面的强力的影响这种情况只能说明</p>
<div v-show="show" @click="shows">展开阅读全文</div>
</div>
<div class="operation">
<div>
<img src="../assets/share.png" alt srcset />
分享
</div>
<div>
<img src="../assets/share.png" alt srcset />
888评论
</div>
<div v-show="!show && lang" @click="hadd">收起</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.PersonafFollow {
padding: 0 36px 39px 30px;
border-bottom: 1px solid #dfdfdf;
.title {
display: flex;
justify-content: space-between;
font-size: 26px;
color: #95998f;
margin-bottom: 28px;
}
.center {
font-size: 30px;
color: #000;
line-height: 46px;
}
.answer {
.user {
display: flex;
align-items: center;
margin-top: 34px;
> img {
width: 58px;
height: 58px;
border-radius: 4px;
margin-right: 20px;
}
> div {
display: flex;
flex-direction: column;
> p {
font-size: 24px;
color: #000;
}
> p:last-child {
margin-top: 10px;
font-size: 24px;
color: #999;
}
}
}
.agree {
margin-top: 29px;
font-size: 26px;
color: #95998f;
}
.content {
position: relative;
overflow: hidden;
> img {
width: 690px;
height: 374px;
background-color: #000;
display: block;
margin-top: 39px;
margin-bottom: 32px;
}
> p {
line-height: 40px;
font-size: 26px;
}
> div {
position: absolute;
width: 750px;
height: 45px;
background-color: #fff;
bottom: 0px;
line-height: 35px;
font-size: 24px;
color: #465a33;
text-align: center;
left: -30px;
box-shadow: 0px 0px 30px #fff;
}
}
.operation {
display: flex;
margin-top: 30px;
> div {
margin-right: 60px;
font-size: 22px;
color: #95998f;
> img {
width: 17px;
height: 17px;
margin-right: 11px;
}
}
> div:last-child {
margin-left: 300px;
margin-right: 0;
}
}
}
}
</style>
<script>
export default {
name: "PersonafFollow",
data() {
return {
show: false,
lang:true
};
},
props: {
indexs: {
default: 0
}
},
methods: {
shows() {
var a = window.document.getElementsByClassName("content")[this.indexs];
a.style.setProperty("max-height", "", "important");
this.show = false;
},
hadd() {
var a = window.document.getElementsByClassName("content")[this.indexs];
a.style.setProperty("max-height", "6.1rem", "important");
this.show = true;
}
},
mounted() {
this.$nextTick(() => {
window.console.log(122)
var a = window.document.getElementsByClassName("content")[this.indexs];
var rem = parseFloat(
window.getComputedStyle(window.document.documentElement)["fontSize"]
);
window.console.log(a.offsetHeight, 5.9 * rem);
if (a.offsetHeight > 5.9 * rem) {
this.show = true;
}else{
this.lang=false
}
});
}
};
</script>