展开收起
This commit is contained in:
parent
e3743ea8c9
commit
e36efea102
@ -1,70 +1,75 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<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>
|
<head>
|
||||||
</html>
|
<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
2
public/jquery-3.4.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -3,6 +3,10 @@
|
|||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<p class="question">有哪些击中你内心阴暗处的句子？</p>
|
<p class="question">有哪些击中你内心阴暗处的句子？</p>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
|
<follow :indexs="0"></follow>
|
||||||
|
<div class="line"></div>
|
||||||
|
<follow :indexs="1"></follow>
|
||||||
|
<div class="line"></div>
|
||||||
<p class="title">相关推荐</p>
|
<p class="title">相关推荐</p>
|
||||||
<div class="recommend">
|
<div class="recommend">
|
||||||
<div>
|
<div>
|
||||||
@ -17,29 +21,27 @@
|
|||||||
<!-- <p class="articlecontent">在信息唾手可得的时代，拉开人与人差距的，不是知识含</p> -->
|
<!-- <p class="articlecontent">在信息唾手可得的时代，拉开人与人差距的，不是知识含</p> -->
|
||||||
<div class="author">汉王的文章 · 556 赞同</div>
|
<div class="author">汉王的文章 · 556 赞同</div>
|
||||||
</div>
|
</div>
|
||||||
<img src="./assets/tuijian.png" alt="" class="pic">
|
<img src="./assets/tuijian.png" alt class="pic" />
|
||||||
</div>
|
</div>
|
||||||
<div class="recommend">
|
<div class="recommend">
|
||||||
<div>
|
<div>
|
||||||
<p class="articlename">阅读时间有限，还要把精力花在摘抄上吗？</p>
|
<p class="articlename">阅读时间有限，还要把精力花在摘抄上吗？</p>
|
||||||
<!-- <p class="articlecontent">在信息唾手可得的时代，拉开人与人差距的，不是知识含</p> -->
|
<!-- <p class="articlecontent">在信息唾手可得的时代，拉开人与人差距的，不是知识含</p> -->
|
||||||
<div class="author">汉王的文章 · 556 赞同</div>
|
<div class="author">汉王的文章 · 556 赞同</div>
|
||||||
</div>
|
</div>
|
||||||
<img src="./assets/tuijian.png" alt="" class="pic">
|
<img src="./assets/tuijian.png" alt class="pic" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<p class="title">热门推荐</p>
|
||||||
<p class="title">热门推荐</p>
|
|
||||||
<div class="recommend">
|
<div class="recommend">
|
||||||
<div>
|
<div>
|
||||||
<p class="articlename">丧后即燃：李松蔚认知升级 16 讲</p>
|
<p class="articlename">丧后即燃：李松蔚认知升级 16 讲</p>
|
||||||
<div class="author">李松蔚的私家课 · 共18</div>
|
<div class="author">李松蔚的私家课 · 共18</div>
|
||||||
<div class="pics">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<div class="recommend">
|
<div class="recommend">
|
||||||
@ -48,21 +50,30 @@
|
|||||||
<!-- <p class="articlecontent">在信息唾手可得的时代，拉开人与人差距的，不是知识含</p> -->
|
<!-- <p class="articlecontent">在信息唾手可得的时代，拉开人与人差距的，不是知识含</p> -->
|
||||||
<div class="author">汉王的文章 · 556 赞同</div>
|
<div class="author">汉王的文章 · 556 赞同</div>
|
||||||
</div>
|
</div>
|
||||||
<img src="./assets/tuijian.png" alt="" class="pic">
|
<img src="./assets/tuijian.png" alt class="pic" />
|
||||||
</div>
|
</div>
|
||||||
<div class="recommend">
|
<div class="recommend">
|
||||||
<div>
|
<div>
|
||||||
<p class="articlename">阅读时间有限，还要把精力花在摘抄上吗？</p>
|
<p class="articlename">阅读时间有限，还要把精力花在摘抄上吗？</p>
|
||||||
<!-- <p class="articlecontent">在信息唾手可得的时代，拉开人与人差距的，不是知识含</p> -->
|
<!-- <p class="articlecontent">在信息唾手可得的时代，拉开人与人差距的，不是知识含</p> -->
|
||||||
<div class="author">汉王的文章 · 556 赞同</div>
|
<div class="author">汉王的文章 · 556 赞同</div>
|
||||||
</div>
|
</div>
|
||||||
<img src="./assets/tuijian.png" alt="" class="pic">
|
<img src="./assets/tuijian.png" alt class="pic" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {};
|
import follow from "./components/indexFollow";
|
||||||
|
export default {
|
||||||
|
name: "IndexArticleDetail",
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
follow
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@ -114,20 +125,20 @@ export default {};
|
|||||||
margin-top: 0.14rem;
|
margin-top: 0.14rem;
|
||||||
margin-bottom: 0.35rem;
|
margin-bottom: 0.35rem;
|
||||||
}
|
}
|
||||||
.pic{
|
.pic {
|
||||||
width: 1.82rem;
|
width: 1.82rem;
|
||||||
height: 1.2rem;
|
height: 1.2rem;
|
||||||
margin: auto 0;
|
margin: auto 0;
|
||||||
}
|
}
|
||||||
.pics{
|
.pics {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-bottom: 0.31rem;
|
margin-bottom: 0.31rem;
|
||||||
>img{
|
> img {
|
||||||
width: 2.23rem;
|
width: 2.23rem;
|
||||||
height: 1.47rem;
|
height: 1.47rem;
|
||||||
margin-right: 0.1rem
|
margin-right: 0.1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
172
src/components/indexFollow.vue
Normal file
172
src/components/indexFollow.vue
Normal 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>
|
||||||
Loading…
Reference in New Issue
Block a user