|
|
@@ -1,292 +1,464 @@
|
|
|
<template>
|
|
|
- <view class="container">
|
|
|
- <image class="background-image" src="/static/images/home/527@2x.png" style="width: 100%;height: 320rpx;"
|
|
|
- mode="scaleToFill"></image>
|
|
|
- <view style="padding: 10rpx 20rpx 0 20rpx;">
|
|
|
- <view style="border-radius: 10rpx;overflow: hidden;">
|
|
|
- <uni-swiper-dot :info="swiperList" :current="dotCurrent" mode="round" :dots-styles="dotsStyles">
|
|
|
- <swiper circular :autoplay="true" :interval="2000" :duration="500" @change="swiperChange">
|
|
|
- <swiper-item>
|
|
|
- <image mode="scaleToFill" src="@/static/images/home/sw1.jpg"
|
|
|
- style="width: 100%;height: 100%;">
|
|
|
- </image>
|
|
|
- </swiper-item>
|
|
|
- <swiper-item>
|
|
|
- <image mode="scaleToFill" src="@/static/images/home/sw2.jpg"
|
|
|
- style="width: 100%;height: 100%;">
|
|
|
- </image>
|
|
|
- </swiper-item>
|
|
|
- <swiper-item>
|
|
|
- <image mode="scaleToFill" src="@/static/images/home/sw3.jpg"
|
|
|
- style="width: 100%;height: 100%;">
|
|
|
- </image>
|
|
|
- </swiper-item>
|
|
|
- <swiper-item>
|
|
|
- <image mode="scaleToFill" src="@/static/images/home/sw4.jpg"
|
|
|
- style="width: 100%;height: 100%;">
|
|
|
- </image>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- </uni-swiper-dot>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="home-card">
|
|
|
- <uni-grid :column="3" :showBorder="false">
|
|
|
- <uni-grid-item>
|
|
|
- <view class="grid-item-box" @click="allClick('扫一扫')">
|
|
|
- <view class="grid-item-box-img">
|
|
|
- <image style="width: 80rpx;height: 80rpx;" src="@/static/images/home/saoyisao.png" />
|
|
|
- </view>
|
|
|
- <view class="grid-item-box-text">
|
|
|
- 扫一扫
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </uni-grid-item>
|
|
|
- <!-- <uni-grid-item>
|
|
|
- <view class="grid-item-box" @click="allClick('新建轮胎保')">
|
|
|
- <view class="grid-item-box-img">
|
|
|
- <image style="width: 100rpx;height: 80rpx;" src="@/static/images/home/home (17).png" />
|
|
|
- </view>
|
|
|
- <view class="grid-item-box-text">
|
|
|
- 新建
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </uni-grid-item> -->
|
|
|
- <uni-grid-item>
|
|
|
- <view class="grid-item-box" @click="allClick('轮胎保')">
|
|
|
- <view class="grid-item-box-img">
|
|
|
- <image style="width: 80rpx;height: 80rpx;" src="@/static/images/home/chexian.png" />
|
|
|
- </view>
|
|
|
- <view class="grid-item-box-text">
|
|
|
- 轮胎保
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </uni-grid-item>
|
|
|
- <uni-grid-item>
|
|
|
- <view class="grid-item-box" @click="allClick('保单')">
|
|
|
- <view class="grid-item-box-img">
|
|
|
- <image style="width: 80rpx;height: 80rpx;" src="@/static/images/home/baoxian.png" />
|
|
|
- </view>
|
|
|
- <view class="grid-item-box-text">
|
|
|
- 保单
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </uni-grid-item>
|
|
|
- </uni-grid>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="container">
|
|
|
+ <image class="background-image" src="/static/images/home/527@2x.png" style="width: 100%;height: 320rpx;"
|
|
|
+ mode="scaleToFill"></image>
|
|
|
+ <view style="padding: 10rpx 20rpx 0 20rpx;">
|
|
|
+ <view style="border-radius: 10rpx;overflow: hidden;">
|
|
|
+ <uni-swiper-dot :info="swiperList" :current="dotCurrent" mode="round" :dots-styles="dotsStyles">
|
|
|
+ <swiper circular :autoplay="true" :interval="2000" :duration="500" @change="swiperChange">
|
|
|
+ <swiper-item>
|
|
|
+ <image mode="scaleToFill" src="@/static/images/home/sw1.jpg"
|
|
|
+ style="width: 100%;height: 100%;">
|
|
|
+ </image>
|
|
|
+ </swiper-item>
|
|
|
+ <swiper-item>
|
|
|
+ <image mode="scaleToFill" src="@/static/images/home/sw2.jpg"
|
|
|
+ style="width: 100%;height: 100%;">
|
|
|
+ </image>
|
|
|
+ </swiper-item>
|
|
|
+ <swiper-item>
|
|
|
+ <image mode="scaleToFill" src="@/static/images/home/sw3.jpg"
|
|
|
+ style="width: 100%;height: 100%;">
|
|
|
+ </image>
|
|
|
+ </swiper-item>
|
|
|
+ <swiper-item>
|
|
|
+ <image mode="scaleToFill" src="@/static/images/home/sw4.jpg"
|
|
|
+ style="width: 100%;height: 100%;">
|
|
|
+ </image>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </uni-swiper-dot>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="home-card">
|
|
|
+ <uni-grid :column="3" :showBorder="false">
|
|
|
+ <uni-grid-item>
|
|
|
+ <view class="grid-item-box" @click="allClick('扫一扫')">
|
|
|
+ <view class="grid-item-box-img">
|
|
|
+ <image style="width: 80rpx;height: 80rpx;" src="@/static/images/home/saoyisao.png"/>
|
|
|
+ </view>
|
|
|
+ <view class="grid-item-box-text">
|
|
|
+ 扫一扫
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-grid-item>
|
|
|
+ <!-- <uni-grid-item>
|
|
|
+ <view class="grid-item-box" @click="allClick('新建轮胎保')">
|
|
|
+ <view class="grid-item-box-img">
|
|
|
+ <image style="width: 100rpx;height: 80rpx;" src="@/static/images/home/home (17).png" />
|
|
|
+ </view>
|
|
|
+ <view class="grid-item-box-text">
|
|
|
+ 新建
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-grid-item> -->
|
|
|
+ <uni-grid-item>
|
|
|
+ <view class="grid-item-box" @click="allClick('轮胎保')">
|
|
|
+ <view class="grid-item-box-img">
|
|
|
+ <image style="width: 80rpx;height: 80rpx;" src="@/static/images/home/chexian.png"/>
|
|
|
+ </view>
|
|
|
+ <view class="grid-item-box-text">
|
|
|
+ 轮胎保
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-grid-item>
|
|
|
+ <uni-grid-item>
|
|
|
+ <view class="grid-item-box" @click="allClick('保单')">
|
|
|
+ <view class="grid-item-box-img">
|
|
|
+ <image style="width: 80rpx;height: 80rpx;" src="@/static/images/home/baoxian.png"/>
|
|
|
+ </view>
|
|
|
+ <view class="grid-item-box-text">
|
|
|
+ 保单
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-grid-item>
|
|
|
+ </uni-grid>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 用户故事模块 -->
|
|
|
+ <view class="user-story-container">
|
|
|
+ <view class="user-story-title">用户故事</view>
|
|
|
+
|
|
|
+ <!-- 使用 scroll-view 实现滚动加载 -->
|
|
|
+ <scroll-view
|
|
|
+ class="user-story-scroll"
|
|
|
+ :scroll-y="true"
|
|
|
+ @scrolltolower="onReachBottom"
|
|
|
+ :style="{ height: scrollViewHeight + 'rpx' }"
|
|
|
+ >
|
|
|
+ <view class="user-story-list">
|
|
|
+ <view class="user-story-item" v-for="(story, index) in displayedStories" :key="index" @click="goToStoryDetail(story.id)">
|
|
|
+ <image :src="story.titleImg" class="story-img" mode="aspectFill"></image>
|
|
|
+ <view class="story-content">
|
|
|
+ <view class="story-title">{{ story.title }}</view>
|
|
|
+ <view class="story-desc">{{ story.content }}</view>
|
|
|
+ <view class="story-footer">
|
|
|
+ <view class="user-info">
|
|
|
+ <image :src="story.userAvatar" class="avatar" mode="aspectFill"></image>
|
|
|
+ <view class="username">{{ story.userName }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="like-count" @click.stop="toggleLike(story, !story.liked, index)">
|
|
|
+ <text class="icon-heart">{{ story.liked ? '❤️' : '♡' }}</text>
|
|
|
+ <text class="like-number">{{ story.likes }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 加载提示 -->
|
|
|
+ <view v-if="loading" class="load-more">加载中...</view>
|
|
|
+ <view v-else-if="noMore" class="load-more">没有更多内容了</view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {
|
|
|
- appList,
|
|
|
- userDept,
|
|
|
- validationCorpEmpty,
|
|
|
- isProcurement,
|
|
|
- brandDescList,
|
|
|
- brandDescDetail,
|
|
|
- getCarOwnerDetail
|
|
|
- } from '@/api/home/index.js'
|
|
|
- import {
|
|
|
- shoppingCartList
|
|
|
- } from '@/api/goods/index.js'
|
|
|
- import {
|
|
|
- details,
|
|
|
- nameDetail
|
|
|
- } from '@/api/personalInformation/index.js'
|
|
|
- import {
|
|
|
- activityList
|
|
|
- } from '@/api/activity/index.js'
|
|
|
- import {
|
|
|
- getAddress
|
|
|
- } from '@/api/home/index.js'
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- dotsStyles: {
|
|
|
- backgroundColor: 'rgba(0, 0, 0, .1)',
|
|
|
- border: '1px #03803B solid',
|
|
|
- color: '#03803B',
|
|
|
- selectedBackgroundColor: '#03803B',
|
|
|
- selectedBorder: '1px #03803B solid'
|
|
|
- },
|
|
|
- dotCurrent: 0,
|
|
|
- swiperList: [
|
|
|
- '@/static/images/home/sw1.jpg',
|
|
|
- '@/static/images/home/sw2.jpg',
|
|
|
- '@/static/images/home/sw3.jpg',
|
|
|
- '@/static/images/home/sw4.jpg'
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad() {},
|
|
|
- onShow() {},
|
|
|
- mounted() {},
|
|
|
- methods: {
|
|
|
- getbrandDescList() {
|
|
|
- brandDescList({
|
|
|
- type: 'LBT',
|
|
|
- whetherIntegral: "0"
|
|
|
- }).then(res => {
|
|
|
- brandDescDetail({
|
|
|
- id: res.data.records[0].id
|
|
|
- }).then(res => {
|
|
|
- this.list3 = res.data.brandFilesList.map(item => {
|
|
|
- return item.url
|
|
|
- })
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- swiperChange(e) {
|
|
|
- this.dotCurrent = e.detail.current;
|
|
|
- },
|
|
|
- allClick(name) {
|
|
|
- if (name == '新建轮胎保') {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/home/insurance/details'
|
|
|
- });
|
|
|
- }
|
|
|
- if (name == '轮胎保') {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/home/insurance/index'
|
|
|
- });
|
|
|
- }
|
|
|
- if (name == '保单') {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/home/claim/index'
|
|
|
- });
|
|
|
- }
|
|
|
- if (name == '注册') {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/home/register/index'
|
|
|
- });
|
|
|
- }
|
|
|
- if (name == '扫一扫') {
|
|
|
- uni.scanCode({
|
|
|
- scanType: ['qrCode'],
|
|
|
- onlyFromCamera: true,
|
|
|
- success: function(res) {
|
|
|
- let obj = JSON.parse(res.result)
|
|
|
- if (obj.phone == uni.getStorageSync('phoneInfo')) {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/home/insurance/details?id=' + obj.tireInsuranceId
|
|
|
- });
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: '轮胎保车主身份识别不正确',
|
|
|
- icon: 'none',
|
|
|
- duration: 2000
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+import {getStoryList, likeStory} from '@/api/home/index.js'
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dotsStyles: {
|
|
|
+ backgroundColor: 'rgba(0, 0, 0, .1)',
|
|
|
+ border: '1px #03803B solid',
|
|
|
+ color: '#03803B',
|
|
|
+ selectedBackgroundColor: '#03803B',
|
|
|
+ selectedBorder: '1px #03803B solid'
|
|
|
+ },
|
|
|
+ dotCurrent: 0,
|
|
|
+ swiperList: [
|
|
|
+ '@/static/images/home/sw1.jpg',
|
|
|
+ '@/static/images/home/sw2.jpg',
|
|
|
+ '@/static/images/home/sw3.jpg',
|
|
|
+ '@/static/images/home/sw4.jpg'
|
|
|
+ ],
|
|
|
+ allStories: [], // 所有模拟数据（或从接口获取）
|
|
|
+ displayedStories: [], // 当前展示的数据
|
|
|
+ page: 1, // 当前页码
|
|
|
+ pageSize: 10, // 每页数量
|
|
|
+ loading: false, // 是否正在加载
|
|
|
+ noMore: false, // 是否已加载全部
|
|
|
+ scrollViewHeight: 600 // scroll-view 高度（可根据屏幕动态计算）
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.initScrollViewHeight();
|
|
|
+ this.loadStories();
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ toggleLike(item, likeStatus, index) {
|
|
|
+ item.liked = likeStatus
|
|
|
+ likeStory(item.id, (likeStatus ? 1 : 0));
|
|
|
+ },
|
|
|
+ swiperChange(e) {
|
|
|
+ this.dotCurrent = e.detail.current;
|
|
|
+ },
|
|
|
+ allClick(name) {
|
|
|
+ if (name == '新建轮胎保') {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/home/insurance/details'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (name == '轮胎保') {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/home/insurance/index'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (name == '保单') {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/home/claim/index'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (name == '注册') {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/home/register/index'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (name == '扫一扫') {
|
|
|
+ uni.scanCode({
|
|
|
+ scanType: ['qrCode'],
|
|
|
+ onlyFromCamera: true,
|
|
|
+ success: function (res) {
|
|
|
+ let obj = JSON.parse(res.result)
|
|
|
+ if (obj.phone == uni.getStorageSync('phoneInfo')) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/home/insurance/details?id=' + obj.tireInsuranceId
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: '轮胎保车主身份识别不正确',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ goToStoryDetail(storyId) {
|
|
|
+ console.info('1111111111111111111111111')
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/home/story/detail?id=${encodeURIComponent(storyId)}`
|
|
|
+ });
|
|
|
+ },
|
|
|
+ initScrollViewHeight() {
|
|
|
+ const sysInfo = uni.getSystemInfoSync();
|
|
|
+ this.scrollViewHeight = (sysInfo.windowHeight * 750 / sysInfo.windowWidth) - 300;
|
|
|
+ },
|
|
|
+ async loadStories() {
|
|
|
+ if (this.loading || this.noMore) return;
|
|
|
+ this.loading = true;
|
|
|
+ try {
|
|
|
+ const newData = await getStoryList({ page: this.page, pageSize: this.pageSize });
|
|
|
+ this.allStories = [...this.allStories, ...newData.data.records];
|
|
|
+ this.displayedStories = [...this.allStories];
|
|
|
+ this.page++;
|
|
|
+ if (this.displayedStories.length >= newData.total) {
|
|
|
+ this.noMore = true;
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ uni.showToast({title: '加载失败', icon: 'none'});
|
|
|
+ } finally {
|
|
|
+ this.loading = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 滚动到底部触发
|
|
|
+ onReachBottom() {
|
|
|
+ if (!this.noMore && !this.loading) {
|
|
|
+ this.loadStories();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- ::v-deep .uni-navbar--border {
|
|
|
- border-bottom-color: #03803B !important;
|
|
|
- }
|
|
|
-
|
|
|
- .container {
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .background-image {
|
|
|
- position: absolute;
|
|
|
- /* 将图片置于组件后面 */
|
|
|
- top: -100rpx
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep .uni-searchbar {
|
|
|
- background-color: #03803B !important;
|
|
|
- pointer-events: none !important;
|
|
|
- user-select: none !important;
|
|
|
- }
|
|
|
-
|
|
|
- .swiper-item {
|
|
|
- display: block;
|
|
|
- height: 300rpx;
|
|
|
- line-height: 300rpx;
|
|
|
- text-align: center;
|
|
|
- background-color: #FFFFFF;
|
|
|
- }
|
|
|
-
|
|
|
- .home-card {
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 10rpx;
|
|
|
- overflow: hidden;
|
|
|
- margin: 20rpx;
|
|
|
- padding: 20rpx;
|
|
|
-
|
|
|
- .goodsImg {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin: 16rpx 0;
|
|
|
-
|
|
|
- .text {
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- width: 300rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #797979;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .home-card-title {
|
|
|
- font-weight: 500;
|
|
|
- font-size: 34rpx;
|
|
|
- color: #0F0D0D;
|
|
|
- margin-left: 20rpx;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep .uni-grid-item {
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .grid-item-box {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- padding: 50rpx 0;
|
|
|
-
|
|
|
- .uni-grid-item__box {
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- .grid-item-box-img {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- // width: 100rpx;
|
|
|
- // height: 100rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .grid-item-box-text {
|
|
|
- width: 100rpx;
|
|
|
- text-align: center;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #6A6A6A;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .card {
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 10rpx;
|
|
|
- overflow: hidden;
|
|
|
- margin: 12rpx 0;
|
|
|
- }
|
|
|
-</style>
|
|
|
+::v-deep .uni-navbar--border {
|
|
|
+ border-bottom-color: #03803B !important;
|
|
|
+}
|
|
|
+
|
|
|
+.container {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .background-image {
|
|
|
+ position: absolute;
|
|
|
+ /* 将图片置于组件后面 */
|
|
|
+ top: -100rpx
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .uni-searchbar {
|
|
|
+ background-color: #03803B !important;
|
|
|
+ pointer-events: none !important;
|
|
|
+ user-select: none !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-item {
|
|
|
+ display: block;
|
|
|
+ height: 300rpx;
|
|
|
+ line-height: 300rpx;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .home-card {
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 20rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+
|
|
|
+ .goodsImg {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 16rpx 0;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ width: 300rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #797979;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .home-card-title {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 34rpx;
|
|
|
+ color: #0F0D0D;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .uni-grid-item {
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid-item-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 50rpx 0;
|
|
|
+
|
|
|
+ .uni-grid-item__box {
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid-item-box-img {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ // width: 100rpx;
|
|
|
+ // height: 100rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid-item-box-text {
|
|
|
+ width: 100rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #6A6A6A;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.card {
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 12rpx 0;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.user-story-container {
|
|
|
+ padding: 20rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.user-story-title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #03803B;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.user-story-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.user-story-item {
|
|
|
+ display: flex;
|
|
|
+ background-color: #f9f9f9;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
|
|
+}
|
|
|
+
|
|
|
+.story-img {
|
|
|
+ width: 180rpx;
|
|
|
+ height: 180rpx;
|
|
|
+ object-fit: cover;
|
|
|
+}
|
|
|
+
|
|
|
+.story-content {
|
|
|
+ flex: 1;
|
|
|
+ padding: 20rpx;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.story-title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #03803B;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 1.4;
|
|
|
+}
|
|
|
+
|
|
|
+.story-desc {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+ margin: 10rpx 0;
|
|
|
+ line-height: 1.5;
|
|
|
+ /* 实现文本省略 */
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2; /* 显示两行，超出则省略 */
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+.story-footer {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between; /* 左右分离 */
|
|
|
+ padding-right: 10rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/* —— 左侧：头像 + 用户名 —— */
|
|
|
+.user-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-shrink: 0; /* 防止被压缩 */
|
|
|
+}
|
|
|
+
|
|
|
+.avatar {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+
|
|
|
+.username {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ margin-left: 10rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/* —— 右侧：点赞 —— */
|
|
|
+.like-count {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 6rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.icon-heart {
|
|
|
+ font-size: 36rpx; /* 大红心 */
|
|
|
+ color: #ff4c4c;
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.like-number {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+
|
|
|
+.user-story-scroll {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.load-more {
|
|
|
+ text-align: center;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+</style>
|
liyuan