|
|
@@ -17,7 +17,7 @@
|
|
|
<div class="desc_right_header">
|
|
|
<div>{{ bookDesc.name }}</div>
|
|
|
<div
|
|
|
- ><span v-if="bookDesc.isbn">ISBN: {{ bookDesc.isbn }}</span>
|
|
|
+ ><span v-if="bookDesc.isbn">ISBN: {{ bookDesc.isbn }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-if="bookDesc.author" class="desc_right_author"> {{ bookDesc.author }} 著 </div>
|
|
|
@@ -28,13 +28,13 @@
|
|
|
|
|
|
<div :class="showTotal ? 'total-introduce' : 'detailed-introduce'">
|
|
|
<div class="intro-content" id="setItemRef" :ref="setItemRef">
|
|
|
- <span class="merchant-desc">{{ bookDesc.brief }}</span>
|
|
|
+ <!-- <span class="merchant-desc">{{ bookDesc.brief }}</span>
|
|
|
<div class="unfold" @click="hideCtxClick" v-if="showExchangeButton">
|
|
|
<p v-if="exchangeButton"
|
|
|
><span>展开</span><img src="@/assets/images/down.png" alt=""
|
|
|
/></p>
|
|
|
<p v-else><span>收起</span><img src="@/assets/images/up.png" alt="" /></p>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -50,436 +50,250 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, reactive, watch, nextTick, defineExpose, defineEmits } from 'vue';
|
|
|
-import { useRouter, useRoute } from 'vue-router';
|
|
|
-import { message } from 'ant-design-vue';
|
|
|
-import pathNav from '../../components/common/pathNav.vue';
|
|
|
-import wares from '../../api/commodity';
|
|
|
-import authority from '@/views/common/authority.vue';
|
|
|
-import fullLoading from '@/components/global/FullLoading.vue';
|
|
|
-import book from '../../api/book';
|
|
|
-const emit = defineEmits(['escClick']);
|
|
|
-const router = useRouter();
|
|
|
+ import { ref, reactive, watch, nextTick, defineExpose, defineEmits } from 'vue';
|
|
|
+ import { useRouter, useRoute } from 'vue-router';
|
|
|
+ import { message } from 'ant-design-vue';
|
|
|
+ import pathNav from '../../components/common/pathNav.vue';
|
|
|
+ import wares from '../../api/commodity';
|
|
|
+ import authority from '@/views/common/authority.vue';
|
|
|
+ import fullLoading from '@/components/global/FullLoading.vue';
|
|
|
+ import book from '../../api/book';
|
|
|
+ const emit = defineEmits(['escClick']);
|
|
|
+ const router = useRouter();
|
|
|
|
|
|
-const route = useRoute();
|
|
|
+ const route = useRoute();
|
|
|
|
|
|
-const navObj = reactive({
|
|
|
- navlist: [
|
|
|
- {
|
|
|
- name: '套餐采购',
|
|
|
- path: '/packageManage',
|
|
|
- active: false,
|
|
|
- },
|
|
|
- {
|
|
|
- name: '套餐详情',
|
|
|
- active: true,
|
|
|
- },
|
|
|
- ],
|
|
|
-});
|
|
|
-const isRead = (file, url) => {
|
|
|
- if (file) {
|
|
|
- var index = file.lastIndexOf('.');
|
|
|
- //获取后缀
|
|
|
- var ext = file.substr(index + 1);
|
|
|
- console.log(ext);
|
|
|
- if (ext == 'pdf' || ext == 'PDF') {
|
|
|
+ const navObj = reactive({
|
|
|
+ navlist: [
|
|
|
+ {
|
|
|
+ name: '套餐采购',
|
|
|
+ path: '/packageManage',
|
|
|
+ active: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '套餐详情',
|
|
|
+ active: true,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ const isRead = (file, url) => {
|
|
|
+ if (file) {
|
|
|
+ var index = file.lastIndexOf('.');
|
|
|
+ //获取后缀
|
|
|
+ var ext = file.substr(index + 1);
|
|
|
+ console.log(ext);
|
|
|
+ if (ext == 'pdf' || ext == 'PDF') {
|
|
|
+ return '立即阅读';
|
|
|
+ } else {
|
|
|
+ return '立即下载';
|
|
|
+ }
|
|
|
+ } else if (url) {
|
|
|
return '立即阅读';
|
|
|
} else {
|
|
|
return '立即下载';
|
|
|
}
|
|
|
- } else if (url) {
|
|
|
- return '立即阅读';
|
|
|
- } else {
|
|
|
- return '立即下载';
|
|
|
- }
|
|
|
-};
|
|
|
-const fixTop = ref(20);
|
|
|
-const pkgDetail = ref<any>({});
|
|
|
-const detailLoading = ref<boolean>(false);
|
|
|
-const authorityFlag = ref<Boolean>(true);
|
|
|
-
|
|
|
-const getDatail = () => {
|
|
|
- detailLoading.value = false;
|
|
|
- var startRequestTime = new Date().getTime();
|
|
|
-};
|
|
|
+ };
|
|
|
+ const fixTop = ref(20);
|
|
|
+ const pkgDetail = ref<any>({});
|
|
|
+ const detailLoading = ref<boolean>(false);
|
|
|
+ const authorityFlag = ref<Boolean>(true);
|
|
|
|
|
|
-getDatail();
|
|
|
+ const getDatail = () => {
|
|
|
+ detailLoading.value = false;
|
|
|
+ var startRequestTime = new Date().getTime();
|
|
|
+ };
|
|
|
|
|
|
-const spinning = ref<boolean>(false);
|
|
|
+ getDatail();
|
|
|
|
|
|
-const bookObj = reactive({
|
|
|
- bookList: [],
|
|
|
-});
|
|
|
+ const spinning = ref<boolean>(false);
|
|
|
|
|
|
-const goToPage = (path) => {
|
|
|
- router.push({
|
|
|
- path: path,
|
|
|
- query: {
|
|
|
- id: route.query.id,
|
|
|
- },
|
|
|
+ const bookObj = reactive({
|
|
|
+ bookList: [],
|
|
|
});
|
|
|
-};
|
|
|
|
|
|
-const typename = ref<string>('');
|
|
|
-const hide = ref<boolean>(true);
|
|
|
-const showTotal = ref<boolean>(true); // 简介全部显示
|
|
|
-const exchangeButton = ref<boolean>(true); // 展开/收起文字改变
|
|
|
-const showExchangeButton = ref<boolean>(true); // 是否显示 展开/收起 文字
|
|
|
-const hideCtx = ref<string>('展开');
|
|
|
-const desc = ref<string>('');
|
|
|
-const hideCtxClick = () => {
|
|
|
- showTotal.value = !showTotal.value;
|
|
|
- exchangeButton.value = !exchangeButton.value;
|
|
|
-};
|
|
|
-const setItemRef = (val) => {
|
|
|
- desc.value = val;
|
|
|
-};
|
|
|
-const button = ref(null);
|
|
|
-const setItemRefctxt = ref();
|
|
|
-const escClick = (val) => {
|
|
|
- console.log('1111');
|
|
|
- emit('escClick', false);
|
|
|
-};
|
|
|
-const fun = () => {
|
|
|
- nextTick(() => {
|
|
|
- // if (!desc.value) {
|
|
|
- // return;
|
|
|
- // }
|
|
|
- // let newDiv = document.getElementById('setItemRef');
|
|
|
- // //const descHeight = window.getComputedStyle(newDiv).height.replace('px', '');
|
|
|
- // console.log(bookDesc.value.brief.length,'1')
|
|
|
- console.log(bookDesc.value.brief.length, '321');
|
|
|
- console.log(document.body.clientWidth, '123');
|
|
|
- if (document.body.clientWidth > 600) {
|
|
|
- if (bookDesc.value.brief.length > 200) {
|
|
|
- showExchangeButton.value = true;
|
|
|
- exchangeButton.value = true;
|
|
|
- showTotal.value = false;
|
|
|
+ const goToPage = (path) => {
|
|
|
+ router.push({
|
|
|
+ path: path,
|
|
|
+ query: {
|
|
|
+ id: route.query.id,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ const typename = ref<string>('');
|
|
|
+ const hide = ref<boolean>(true);
|
|
|
+ const showTotal = ref<boolean>(true); // 简介全部显示
|
|
|
+ const exchangeButton = ref<boolean>(true); // 展开/收起文字改变
|
|
|
+ const showExchangeButton = ref<boolean>(true); // 是否显示 展开/收起 文字
|
|
|
+ const hideCtx = ref<string>('展开');
|
|
|
+ const desc = ref<string>('');
|
|
|
+ const hideCtxClick = () => {
|
|
|
+ showTotal.value = !showTotal.value;
|
|
|
+ exchangeButton.value = !exchangeButton.value;
|
|
|
+ };
|
|
|
+ const setItemRef = (val) => {
|
|
|
+ desc.value = val;
|
|
|
+ };
|
|
|
+ const button = ref(null);
|
|
|
+ const setItemRefctxt = ref();
|
|
|
+ const escClick = (val) => {
|
|
|
+ console.log('1111');
|
|
|
+ emit('escClick', false);
|
|
|
+ };
|
|
|
+ const fun = () => {
|
|
|
+ nextTick(() => {
|
|
|
+ // if (!desc.value) {
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+ // let newDiv = document.getElementById('setItemRef');
|
|
|
+ // //const descHeight = window.getComputedStyle(newDiv).height.replace('px', '');
|
|
|
+ // console.log(bookDesc.value.brief.length,'1')
|
|
|
+ console.log(bookDesc.value.brief.length, '321');
|
|
|
+ console.log(document.body.clientWidth, '123');
|
|
|
+ if (document.body.clientWidth > 600) {
|
|
|
+ if (bookDesc.value.brief.length > 200) {
|
|
|
+ showExchangeButton.value = true;
|
|
|
+ exchangeButton.value = true;
|
|
|
+ showTotal.value = false;
|
|
|
+ } else {
|
|
|
+ showExchangeButton.value = false;
|
|
|
+ showTotal.value = true;
|
|
|
+ }
|
|
|
} else {
|
|
|
- showExchangeButton.value = false;
|
|
|
- showTotal.value = true;
|
|
|
+ if (bookDesc.value.brief.length > 100) {
|
|
|
+ showExchangeButton.value = true;
|
|
|
+ exchangeButton.value = true;
|
|
|
+ showTotal.value = false;
|
|
|
+ } else {
|
|
|
+ showExchangeButton.value = false;
|
|
|
+ showTotal.value = true;
|
|
|
+ }
|
|
|
}
|
|
|
- } else {
|
|
|
- if (bookDesc.value.brief.length > 100) {
|
|
|
+ });
|
|
|
+ };
|
|
|
+ // 详情
|
|
|
+ const bookId = ref<number>(0);
|
|
|
+ let bookDesc = ref<any>({});
|
|
|
+ const bookDsec = () => {
|
|
|
+ let params = {
|
|
|
+ bookId: bookId.value,
|
|
|
+ };
|
|
|
+ book.viewBookDetails(params).then((res) => {
|
|
|
+ const { data, code, message } = res.data;
|
|
|
+ if (code === 200) {
|
|
|
+ bookDesc.value = data;
|
|
|
showExchangeButton.value = true;
|
|
|
exchangeButton.value = true;
|
|
|
showTotal.value = false;
|
|
|
- } else {
|
|
|
- showExchangeButton.value = false;
|
|
|
- showTotal.value = true;
|
|
|
+ fun();
|
|
|
}
|
|
|
- }
|
|
|
- });
|
|
|
-};
|
|
|
-// 详情
|
|
|
-const bookId = ref<number>(0);
|
|
|
-let bookDesc = ref<any>({});
|
|
|
-const bookDsec = () => {
|
|
|
- let params = {
|
|
|
- bookId: bookId.value,
|
|
|
+ });
|
|
|
};
|
|
|
- book.viewBookDetails(params).then((res) => {
|
|
|
- const { data, code, message } = res.data;
|
|
|
- if (code === 200) {
|
|
|
- bookDesc.value = data;
|
|
|
- showExchangeButton.value = true;
|
|
|
- exchangeButton.value = true;
|
|
|
- showTotal.value = false;
|
|
|
- fun();
|
|
|
- }
|
|
|
+ defineExpose({
|
|
|
+ bookId,
|
|
|
+ bookDsec,
|
|
|
+ typename,
|
|
|
});
|
|
|
-};
|
|
|
-defineExpose({
|
|
|
- bookId,
|
|
|
- bookDsec,
|
|
|
- typename,
|
|
|
-});
|
|
|
|
|
|
-const readPdf = (file, url) => {
|
|
|
- window.open(file || url);
|
|
|
-};
|
|
|
+ const readPdf = (file, url) => {
|
|
|
+ window.open(file || url);
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-.main {
|
|
|
- background: white;
|
|
|
- // margin-top: 100px;
|
|
|
-}
|
|
|
-.pkg-detail-main {
|
|
|
- width: 1160px;
|
|
|
- margin: 0 auto;
|
|
|
- background: white;
|
|
|
-}
|
|
|
-.content {
|
|
|
- // width: 1160px;
|
|
|
- width: 867px;
|
|
|
- // margin: 0 auto;
|
|
|
- /*display: flex;*/
|
|
|
- /*justify-content: space-between;*/
|
|
|
- .header {
|
|
|
- padding: 24px 0;
|
|
|
- .header-title {
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #999999;
|
|
|
- line-height: 22px;
|
|
|
- }
|
|
|
- .line {
|
|
|
- font-size: 14px;
|
|
|
- color: #999999;
|
|
|
- padding: 0 8px;
|
|
|
- }
|
|
|
- .book-name {
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #666666;
|
|
|
- line-height: 22px;
|
|
|
- }
|
|
|
- }
|
|
|
- .book_desc {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- /*flex: 1;*/
|
|
|
- .book_desc_left {
|
|
|
- width: 180px;
|
|
|
- height: 253px;
|
|
|
-
|
|
|
- margin-right: 32px;
|
|
|
- img {
|
|
|
- width: 180px;
|
|
|
- height: 253px;
|
|
|
- }
|
|
|
- }
|
|
|
- .book_desc_right {
|
|
|
- margin-left: 20px;
|
|
|
- width: 655px;
|
|
|
- word-break: break-all;
|
|
|
- .desc_right_header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding-bottom: 12px;
|
|
|
- align-items: center;
|
|
|
- div:first-child {
|
|
|
- width: 469px;
|
|
|
- font-size: 16px;
|
|
|
- font-family: PingFangSC-Medium, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #333333;
|
|
|
- line-height: 16px;
|
|
|
- }
|
|
|
- div:last-child {
|
|
|
- width: 154px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #666666;
|
|
|
- line-height: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
- .desc_right_author {
|
|
|
- padding-bottom: 12px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #666666;
|
|
|
- line-height: 20px;
|
|
|
- }
|
|
|
- .desc_right_ctx {
|
|
|
- width: 655px;
|
|
|
- min-height: 113px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #666666;
|
|
|
- line-height: 20px;
|
|
|
- .total-introduce {
|
|
|
- height: auto;
|
|
|
- overflow: hidden;
|
|
|
- font-size: 14px;
|
|
|
- .intro-content {
|
|
|
- .merchant-desc {
|
|
|
- width: 100%;
|
|
|
- line-height: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
- .unfold {
|
|
|
- display: block;
|
|
|
- width: 50px;
|
|
|
- height: 20px;
|
|
|
- text-align: left;
|
|
|
- p {
|
|
|
- margin: 0;
|
|
|
- line-height: 20px;
|
|
|
- color: #1677ff;
|
|
|
- cursor: pointer;
|
|
|
- img {
|
|
|
- display: inline-block;
|
|
|
- width: 12px;
|
|
|
- height: 12px;
|
|
|
- margin: -4px 0 0 4px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .detailed-introduce {
|
|
|
- font-size: 14px;
|
|
|
- color: #666;
|
|
|
- .intro-content {
|
|
|
- //最大高度设为3倍的行间距
|
|
|
- max-height: 80px;
|
|
|
- line-height: 20px;
|
|
|
- background-color: #fff;
|
|
|
- .merchant-desc {
|
|
|
- width: 100%;
|
|
|
- line-height: 20px;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-line-clamp: 4;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- }
|
|
|
- .unfold {
|
|
|
- width: 50px;
|
|
|
- height: 20px;
|
|
|
- text-align: left;
|
|
|
- p {
|
|
|
- margin: 0;
|
|
|
- color: #1677ff;
|
|
|
- cursor: pointer;
|
|
|
- img {
|
|
|
- display: inline-block;
|
|
|
- width: 12px;
|
|
|
- height: 12px;
|
|
|
- margin: -4px 0 0 4px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .desc_right_read {
|
|
|
- /*display: flex;*/
|
|
|
- /*justify-content: flex-start;*/
|
|
|
- margin-top: 36px;
|
|
|
- .read_txt {
|
|
|
- cursor: pointer;
|
|
|
- width: 96px;
|
|
|
- height: 40px;
|
|
|
- background: #1677ff;
|
|
|
- border-radius: 4px;
|
|
|
- font-size: 16px;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #ffffff;
|
|
|
- line-height: 40px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-@media screen and (min-width: 600px) and (max-width: 1024px) {
|
|
|
- .pkg-detail-main {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .content {
|
|
|
- /*width: 867px;*/
|
|
|
- width: 100%;
|
|
|
- padding: 0 20px;
|
|
|
- .book_desc {
|
|
|
- .book_desc_right {
|
|
|
- flex: 1;
|
|
|
- .desc_right_header {
|
|
|
- div:first-child {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
- }
|
|
|
- .desc_right_ctx {
|
|
|
- flex: 1;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-@media screen and (max-width: 600px) {
|
|
|
.main {
|
|
|
- margin-top: 130px;
|
|
|
+ background: white;
|
|
|
+ // margin-top: 100px;
|
|
|
}
|
|
|
.pkg-detail-main {
|
|
|
- width: 100%;
|
|
|
+ width: 1160px;
|
|
|
+ margin: 0 auto;
|
|
|
+ background: white;
|
|
|
}
|
|
|
.content {
|
|
|
- /*width: 867px;*/
|
|
|
- width: 100%;
|
|
|
- padding: 0 20px;
|
|
|
+ // width: 1160px;
|
|
|
+ width: 867px;
|
|
|
+ // margin: 0 auto;
|
|
|
+ /*display: flex;*/
|
|
|
+ /*justify-content: space-between;*/
|
|
|
.header {
|
|
|
- padding: 15px 0;
|
|
|
+ padding: 24px 0;
|
|
|
.header-title {
|
|
|
- font-size: 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 22px;
|
|
|
}
|
|
|
.line {
|
|
|
- font-size: 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999999;
|
|
|
+ padding: 0 8px;
|
|
|
}
|
|
|
.book-name {
|
|
|
- font-size: 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 22px;
|
|
|
}
|
|
|
}
|
|
|
.book_desc {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
+ /*flex: 1;*/
|
|
|
.book_desc_left {
|
|
|
- width: 150px;
|
|
|
- height: 240px;
|
|
|
- margin-right: 5px;
|
|
|
+ width: 180px;
|
|
|
+ height: 253px;
|
|
|
+
|
|
|
+ margin-right: 32px;
|
|
|
img {
|
|
|
- width: 150px;
|
|
|
- height: 240px;
|
|
|
+ width: 180px;
|
|
|
+ height: 253px;
|
|
|
}
|
|
|
}
|
|
|
.book_desc_right {
|
|
|
- margin-left: 10px;
|
|
|
+ margin-left: 20px;
|
|
|
width: 655px;
|
|
|
word-break: break-all;
|
|
|
.desc_right_header {
|
|
|
- display: block;
|
|
|
- padding-bottom: 5px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-bottom: 12px;
|
|
|
+ align-items: center;
|
|
|
div:first-child {
|
|
|
- width: 100%;
|
|
|
- font-size: 14px;
|
|
|
+ width: 469px;
|
|
|
+ font-size: 16px;
|
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
|
font-weight: 500;
|
|
|
color: #333333;
|
|
|
- line-height: 14px;
|
|
|
- padding-bottom: 5px;
|
|
|
+ line-height: 16px;
|
|
|
}
|
|
|
div:last-child {
|
|
|
- width: 100%;
|
|
|
- font-size: 12px;
|
|
|
+ width: 154px;
|
|
|
+ font-size: 14px;
|
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
color: #666666;
|
|
|
- line-height: 16px;
|
|
|
+ line-height: 20px;
|
|
|
}
|
|
|
}
|
|
|
.desc_right_author {
|
|
|
- padding-bottom: 8px;
|
|
|
- font-size: 12px;
|
|
|
+ padding-bottom: 12px;
|
|
|
+ font-size: 14px;
|
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
color: #666666;
|
|
|
- line-height: 14px;
|
|
|
+ line-height: 20px;
|
|
|
}
|
|
|
.desc_right_ctx {
|
|
|
- width: 100%;
|
|
|
+ width: 655px;
|
|
|
min-height: 113px;
|
|
|
- font-size: 12px;
|
|
|
+ font-size: 14px;
|
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
color: #666666;
|
|
|
- line-height: 12px;
|
|
|
+ line-height: 20px;
|
|
|
.total-introduce {
|
|
|
height: auto;
|
|
|
overflow: hidden;
|
|
|
@@ -510,7 +324,7 @@ const readPdf = (file, url) => {
|
|
|
}
|
|
|
}
|
|
|
.detailed-introduce {
|
|
|
- font-size: 12px;
|
|
|
+ font-size: 14px;
|
|
|
color: #666;
|
|
|
.intro-content {
|
|
|
//最大高度设为3倍的行间距
|
|
|
@@ -548,30 +362,216 @@ const readPdf = (file, url) => {
|
|
|
.desc_right_read {
|
|
|
/*display: flex;*/
|
|
|
/*justify-content: flex-start;*/
|
|
|
- margin-top: 16px;
|
|
|
+ margin-top: 36px;
|
|
|
.read_txt {
|
|
|
cursor: pointer;
|
|
|
- width: 66px;
|
|
|
- height: 30px;
|
|
|
+ width: 96px;
|
|
|
+ height: 40px;
|
|
|
background: #1677ff;
|
|
|
border-radius: 4px;
|
|
|
- font-size: 12px;
|
|
|
+ font-size: 16px;
|
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
color: #ffffff;
|
|
|
- line-height: 30px;
|
|
|
+ line-height: 40px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
+ @media screen and (min-width: 600px) and (max-width: 1024px) {
|
|
|
+ .pkg-detail-main {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ /*width: 867px;*/
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 20px;
|
|
|
+ .book_desc {
|
|
|
+ .book_desc_right {
|
|
|
+ flex: 1;
|
|
|
+ .desc_right_header {
|
|
|
+ div:first-child {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .desc_right_ctx {
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @media screen and (max-width: 600px) {
|
|
|
+ .main {
|
|
|
+ margin-top: 130px;
|
|
|
+ }
|
|
|
+ .pkg-detail-main {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ /*width: 867px;*/
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 20px;
|
|
|
+ .header {
|
|
|
+ padding: 15px 0;
|
|
|
+ .header-title {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .line {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .book-name {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .book_desc {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .book_desc_left {
|
|
|
+ width: 150px;
|
|
|
+ height: 240px;
|
|
|
+ margin-right: 5px;
|
|
|
+ img {
|
|
|
+ width: 150px;
|
|
|
+ height: 240px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .book_desc_right {
|
|
|
+ margin-left: 10px;
|
|
|
+ width: 655px;
|
|
|
+ word-break: break-all;
|
|
|
+ .desc_right_header {
|
|
|
+ display: block;
|
|
|
+ padding-bottom: 5px;
|
|
|
+ div:first-child {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 14px;
|
|
|
+ padding-bottom: 5px;
|
|
|
+ }
|
|
|
+ div:last-child {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .desc_right_author {
|
|
|
+ padding-bottom: 8px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 14px;
|
|
|
+ }
|
|
|
+ .desc_right_ctx {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 113px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 12px;
|
|
|
+ .total-introduce {
|
|
|
+ height: auto;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 14px;
|
|
|
+ .intro-content {
|
|
|
+ .merchant-desc {
|
|
|
+ width: 100%;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .unfold {
|
|
|
+ display: block;
|
|
|
+ width: 50px;
|
|
|
+ height: 20px;
|
|
|
+ text-align: left;
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #1677ff;
|
|
|
+ cursor: pointer;
|
|
|
+ img {
|
|
|
+ display: inline-block;
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ margin: -4px 0 0 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .detailed-introduce {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666;
|
|
|
+ .intro-content {
|
|
|
+ //最大高度设为3倍的行间距
|
|
|
+ max-height: 80px;
|
|
|
+ line-height: 20px;
|
|
|
+ background-color: #fff;
|
|
|
+ .merchant-desc {
|
|
|
+ width: 100%;
|
|
|
+ line-height: 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 4;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
+ .unfold {
|
|
|
+ width: 50px;
|
|
|
+ height: 20px;
|
|
|
+ text-align: left;
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ color: #1677ff;
|
|
|
+ cursor: pointer;
|
|
|
+ img {
|
|
|
+ display: inline-block;
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ margin: -4px 0 0 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .desc_right_read {
|
|
|
+ /*display: flex;*/
|
|
|
+ /*justify-content: flex-start;*/
|
|
|
+ margin-top: 16px;
|
|
|
+ .read_txt {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 66px;
|
|
|
+ height: 30px;
|
|
|
+ background: #1677ff;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
|
|
<style lang="less">
|
|
|
-.tootip {
|
|
|
- .ant-tooltip-inner {
|
|
|
- width: 128px;
|
|
|
+ .tootip {
|
|
|
+ .ant-tooltip-inner {
|
|
|
+ width: 128px;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
</style>
|
