Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
fe45e12c 1 parent 881a068d

🌈 style(书籍详情页): 样式调整

Inline Side-by-side
Showing 2 changed files with 31 additions and 24 deletions
......@@ -15,6 +15,7 @@ module.exports = {
"multiline": {
"max": 5
}
}]
}],
"vue/singleline-html-element-content-newline": 0, // 在单行元素的内容之前和之后需要换行符
}
}
......
<template>
<div class="book-detail-page content-bg">
<div class="modify-top"></div>
<div style="height: 1.5rem;"></div>
<div class="modify-top" />
<div style="height: 1.5rem;" />
<div class="book-detail">
<div style="text-align: center;">
<van-image width="220" height="220" :src="bookInfo.cover" />
......@@ -10,10 +10,12 @@
<p class="book-post">{{ bookInfo.name }}</p>
<div id="book-intro" :class="{ 'van-multi-ellipsis--l3': isToggle }">{{ bookInfo.note }}</div>
<div v-if="hasToggle">
<div v-if="isToggle" @click="isToggle = false" class="book-toggle-icon">展开&nbsp;
<div v-if="isToggle" class="book-toggle-icon" @click="isToggle = false">
展开&nbsp;
<van-icon style="vertical-align: middle;" size="0.9rem" :name="icon_down" />
</div>
<div v-else @click="isToggle = true" class="book-toggle-icon">折叠&nbsp;
<div v-else class="book-toggle-icon" @click="isToggle = true">
折叠&nbsp;
<van-icon style="vertical-align: middle;" size="0.9rem" :name="icon_up" />
</div>
</div>
......@@ -37,12 +39,12 @@
<div class="book-video-language">
<van-row>
<van-col span="6">
<div @click="toggleLanguage('mandarin')" :class="[checkMandarin ? 'checked' : 'uncheck']">普通话</div>
<div :class="[checkMandarin ? 'checked' : 'uncheck']" @click="toggleLanguage('mandarin')">普通话</div>
</van-col>
<van-col span="6">
<div @click="toggleLanguage('localism')" :class="[checkLocalism ? 'checked' : 'uncheck']">方言</div>
<div :class="[checkLocalism ? 'checked' : 'uncheck']" @click="toggleLanguage('localism')">方言</div>
</van-col>
<van-col span="12" v-if="checkLocalism" @click="showPicker = true">
<van-col v-if="checkLocalism" span="12" @click="showPicker = true">
<div class="choose-wrapper">
<div class="text">
&nbsp;{{ chooseLanguage.text }}
......@@ -54,31 +56,35 @@
</van-col>
</van-row>
<van-popup v-model:show="showPicker" round position="bottom">
<van-picker :columns="columns" :columns-field-names="{ text: 'text', value: 'val', children: 'children' }"
@cancel="showPicker = false" @confirm="onConfirm" />
<van-picker
:columns="columns" :columns-field-names="{ text: 'text', value: 'val', children: 'children' }" @cancel="showPicker = false" @confirm="onConfirm"
/>
</van-popup>
</div>
</van-sticky>
<div class="book-video-list">
<van-list v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''"
@load="onLoad">
<template v-for="item in prod_list" :key="item" style="height: 3rem;">
<van-list v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''" @load="onLoad">
<template v-for="item in prod_list" :key="item">
<video-card :item="item">
<template #bookDetailSub>
<div @click="goToDetail(item.id, item.book_id, item.type)"
style="color: #999999; padding: 0px 1rem 0.5rem;">{{ item.kg_name }} ｜ {{ item.localism_type }} </div>
<div
style="color: #999999; padding: 0px 1rem 0.5rem;"
@click="goToDetail(item.id, item.book_id, item.type)"
>
{{ item.kg_name }} ｜ {{ item.localism_type }}
</div>
</template>
</video-card>
</template>
</van-list>
</div>
<div style="height: 2rem;"></div>
<div style="height: 2rem;" />
<van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无作品信息" />
</div>
<div style="height: 6rem;"></div>
<div style="height: 6rem;" />
<div class="book-bar">
<div @click="onSubscribe" class="text">
<div class="text" @click="onSubscribe">
<template v-if="!bookInfo.is_subscribe">
<van-icon :name="icon_subscribed" size="1.25rem" style="margin: 0 auto;" />
<span style="font-size: 0.85rem;">订阅</span>
......@@ -89,23 +95,23 @@
</template>
</div>
<div class="button">
<my-button @on-click="uploadVideo" type="primary">上传作品</my-button>
<my-button type="primary" @on-click="uploadVideo">上传作品</my-button>
</div>
<div class="button">
<my-button @on-click="toDonate" type="plain">爱心捐书</my-button>
<my-button type="plain" @on-click="toDonate">爱心捐书</my-button>
</div>
</div>
<shortcut-fixed type="C" :item="shortcutItem"></shortcut-fixed>
<shortcut-fixed type="C" :item="shortcutItem" />
</div>
<!-- 上传时，如果没有默认儿童提示弹框, 如果没有实名认证提示弹框 -->
<notice-overlay :show="showNotice" :text="noticeText" @on-submit="onSubmit" @on-close="onClose">
<div style="color: #333333;">
<div v-html="noticeHtml"></div>
<div v-html="noticeHtml" />
</div>
</notice-overlay>
<donate-book :showPopup="showDonate" :item="userInfo" @on-close="closeDonate"></donate-book>
<donate-book :show-popup="showDonate" :item="userInfo" @on-close="closeDonate" />
<van-overlay :show="show" z-index="9999">
<div class="wrapper" @click.stop>
......@@ -117,7 +123,7 @@
<script setup>
import { ref, onActivated, nextTick } from 'vue'
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
import { Cookies, $, _, storeToRefs, mainStore, Toast, hasEllipsis } from '@/utils/generatePackage'
import { Cookies, _, storeToRefs, mainStore, Toast, hasEllipsis } from '@/utils/generatePackage'
import { MyButton, VideoCard, NoticeOverlay, DonateBook, ShortcutFixed } from '@/utils/generateModules'
import { icon_video, icon_up, icon_down, icon_subscribed, icon_unsubscribe, no_image } from '@/utils/generateIcons'
import { JSJ_FORM_C } from '@/constant'
......