|
@@ -1,7 +1,11 @@
|
|
|
<!-- -->
|
|
|
<template>
|
|
|
- <div class="Big-Book-prev-Tiny" v-if="curQue">
|
|
|
- <h2 v-if="curQue.title">{{curQue.title}}</h2>
|
|
|
+ <div
|
|
|
+ class="Big-Book-prev-Tiny"
|
|
|
+ v-if="curQue"
|
|
|
+ :class="[isPhone ? 'Big-Book-prev-Tiny-phone' : '']"
|
|
|
+ >
|
|
|
+ <h2 v-if="curQue.title">{{ curQue.title }}</h2>
|
|
|
<div v-html="curQue.con" class="tiny-box"></div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -9,7 +13,7 @@
|
|
|
<script>
|
|
|
export default {
|
|
|
components: {},
|
|
|
- props: ["curQue"],
|
|
|
+ props: ["curQue", "isPhone"],
|
|
|
data() {
|
|
|
return {};
|
|
|
},
|
|
@@ -27,31 +31,37 @@ export default {
|
|
|
updated() {}, //生命周期 - 更新之后
|
|
|
beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
destroyed() {}, //生命周期 - 销毁完成
|
|
|
- activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
|
|
|
+ activated() {} //如果页面有keep-alive缓存功能,这个函数会触发
|
|
|
};
|
|
|
</script>
|
|
|
-<style lang='scss' scoped>
|
|
|
+<style lang="scss" scoped>
|
|
|
//@import url(); 引入公共css类
|
|
|
-.Big-Book-prev-Tiny{
|
|
|
- width: 100%;
|
|
|
- margin-bottom: 24px;
|
|
|
- h2{
|
|
|
- margin: 16px 0 0;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 16px;
|
|
|
- line-height: 24px;
|
|
|
- color: #000000;
|
|
|
- }
|
|
|
- .tiny-box{
|
|
|
- word-break: break-word;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
+.Big-Book-prev-Tiny {
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ h2 {
|
|
|
+ margin: 16px 0 0;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .tiny-box {
|
|
|
+ word-break: break-word;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss">
|
|
|
-.Big-Book-prev-Tiny{
|
|
|
- p{
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
+.Big-Book-prev-Tiny {
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
}
|
|
|
-</style>
|
|
|
+.Big-Book-prev-Tiny-phone {
|
|
|
+ img {
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: fit-content;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|