GithubProxy/uni-halo
1
0
Fork 0
mirror of https://github.com/ialley-workshop-open/uni-halo.git synced 2025-05-21 02:50:15 +09:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: 修复文章分享功能

Browse Source
This commit is contained in:
小莫唐尼 2024-10-22 16:30:30 +08:00
parent 26ce84b950
commit 115aea2580
3 changed files with 1579 additions and 1558 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pages/index/index.vue
View File

@ -37,7 +37,7 @@
}) })
}, },
methods: { methods: {
fnCheckShowStarted() { fnCheckShowStarted() {
if (!this.configs.appConfig.startConfig.enabled) { if (!this.configs.appConfig.startConfig.enabled) {
uni.switchTab({ uni.switchTab({
url: homePagePath url: homePagePath

850
pages/tabbar/home/home.vue
View File

@ -1,462 +1,464 @@
<template> <template>
<view class="app-page"> <view class="app-page">
<tm-menubars iconColor="white" color="white" :flat="true" :showback="false"> <tm-menubars iconColor="white" color="white" :flat="true" :showback="false">
<view slot="left"> <view slot="left">
<image @click="fnOnLogoToPage" class="logo ml-24 round-24" :src="appInfo.logo" mode="scaleToFill"/> <image @click="fnOnLogoToPage" class="logo ml-24 round-24" :src="appInfo.logo" mode="scaleToFill" />
</view> </view>
<view class="search-input round-12 pt-12 pb-12 flex pl-24" @click="fnToSearch"> <view class="search-input round-12 pt-12 pb-12 flex pl-24" @click="fnToSearch">
<text class="search-input_icon iconfont text-size-m icon-search text-grey"></text> <text class="search-input_icon iconfont text-size-m icon-search text-grey"></text>
<view class="search-input_text pl-12 text-size-m text-grey">搜索内容...</view> <view class="search-input_text pl-12 text-size-m text-grey">搜索内容...</view>
</view> </view>
<!-- #ifdef APP-PLUS || H5 --> <!-- #ifdef APP-PLUS || H5 -->
<view slot="right" class="mr-24 text-size-m text-grey text-overflow">{{ appInfo.name }}</view> <view slot="right" class="mr-24 text-size-m text-grey text-overflow">{{ appInfo.name }}</view>
<!-- #endif --> <!-- #endif -->
</tm-menubars> </tm-menubars>
<view v-if="loading !== 'success' && articleList.length===0" class="loading-wrap"> <view v-if="loading !== 'success' && articleList.length===0" class="loading-wrap">
<tm-skeleton model="card"></tm-skeleton> <tm-skeleton model="card"></tm-skeleton>
<tm-skeleton model="cardActions"></tm-skeleton> <tm-skeleton model="cardActions"></tm-skeleton>
<tm-skeleton model="list"></tm-skeleton> <tm-skeleton model="list"></tm-skeleton>
<tm-skeleton model="listAvatr"></tm-skeleton> <tm-skeleton model="listAvatr"></tm-skeleton>
<tm-skeleton model="listAvatr"></tm-skeleton> <tm-skeleton model="listAvatr"></tm-skeleton>
<tm-skeleton model="listAvatr"></tm-skeleton> <tm-skeleton model="listAvatr"></tm-skeleton>
</view> </view>
<block v-else> <block v-else>
<view v-if="!haloConfigs.basicConfig.auditModeEnabled" class="bg-white pb-24"> <view v-if="!haloConfigs.basicConfig.auditModeEnabled" class="bg-white pb-24">
<view class="banner bg-white ml-24 mr-24 mt-12 round-3" v-if="bannerList.length != 0"> <view class="banner bg-white ml-24 mr-24 mt-12 round-3" v-if="bannerList.length != 0">
<e-swiper :dotPosition="globalAppSettings.banner.dotPosition" :autoplay="true" <e-swiper :dotPosition="globalAppSettings.banner.dotPosition" :autoplay="true"
:useDot="globalAppSettings.banner.useDot" :list="bannerList" :useDot="globalAppSettings.banner.useDot" :list="bannerList"
@on-click="fnOnBannerClick"></e-swiper> @on-click="fnOnBannerClick"></e-swiper>
</view> </view>
</view> </view>
<view v-if="!haloConfigs.basicConfig.auditModeEnabled" class="flex flex-between mt-16 mb-24 pl-24 pr-24"> <!-- 精品分类 -->
<view class="page-item_title text-weight-b ">精品分类</view> <block v-if="haloConfigs.pageConfig.homeConfig.useCategory">
<view class="show-more flex flex-center bg-white round-3" @click="fnToCategoryPage"> <view class="flex flex-between mt-16 mb-24 pl-24 pr-24">
<text class="iconfont icon-angle-right text-size-s text-grey-darken-1"></text> <view class="page-item_title text-weight-b ">精品分类</view>
</view> <view class="show-more flex flex-center bg-white round-3" @click="fnToCategoryPage">
<view v-if="false" class="flex flex-center text-size-s text-grey-darken-1" @click="fnToCategoryPage"> <text class="iconfont icon-angle-right text-size-s text-grey-darken-1"></text>
<text class=" text-size-m">查看更多</text> </view>
<text class="iconfont icon-angle-right text-size-s "></text> <view v-if="false" class="flex flex-center text-size-s text-grey-darken-1"
</view> @click="fnToCategoryPage">
</view> <text class=" text-size-m">查看更多</text>
<scroll-view v-if="!haloConfigs.basicConfig.auditModeEnabled" class="category" scroll-x="true"> <text class="iconfont icon-angle-right text-size-s "></text>
<view v-if="categoryList.length == 0" class="cate-empty round-3 mr-5 flex flex-center text-grey"> </view>
还没有任何分类~ </view>
</view> <scroll-view class="category" scroll-x="true">
<block v-else> <view v-if="categoryList.length == 0" class="cate-empty round-3 mr-5 flex flex-center text-grey">
<view class="content" v-for="(category, index) in categoryList" :key="category.metadata.name" 还没有任何分类~
@click="fnToCategoryBy(category)"> </view>
<category-mini-card :category="category"></category-mini-card> <block v-else>
</view> <view class="content" v-for="(category, index) in categoryList" :key="category.metadata.name"
</block> @click="fnToCategoryBy(category)">
</scroll-view> <category-mini-card :category="category"></category-mini-card>
</view>
</block>
</scroll-view>
</block>
<!-- 最新文章 --> <!-- 最新文章 -->
<view class="flex flex-between mt-24 mb-24 pl-24 pr-24"> <view v-if="!haloConfigs.basicConfig.auditModeEnabled" class="flex flex-between mt-24 mb-24 pl-24 pr-24">
<view class="page-item_title text-weight-b">最新列表</view> <view class="page-item_title text-weight-b">最新列表</view>
<view class="show-more flex flex-center bg-white round-3" @click="fnToArticlesPage"> <view class="show-more flex flex-center bg-white round-3" @click="fnToArticlesPage">
<text class="iconfont icon-angle-right text-size-s text-grey-darken-1"></text> <text class="iconfont icon-angle-right text-size-s text-grey-darken-1"></text>
</view> </view>
<view v-if="false" class="flex flex-center text-size-s text-grey-darken-1" @click="fnToArticlesPage"> <view v-if="false" class="flex flex-center text-size-s text-grey-darken-1" @click="fnToArticlesPage">
<text class=" text-size-m ">查看更多</text> <text class=" text-size-m ">查看更多</text>
<text class="iconfont icon-angle-right text-size-s "></text> <text class="iconfont icon-angle-right text-size-s "></text>
</view> </view>
</view> </view>
<view v-if="articleList.length == 0" class="article-empty"> <view v-if="articleList.length == 0" class="article-empty">
<tm-empty icon="icon-shiliangzhinengduixiang-" label="博主还没有发表任何内容~"></tm-empty> <tm-empty icon="icon-shiliangzhinengduixiang-" label="博主还没有发表任何内容~"></tm-empty>
</view> </view>
<block v-else> <block v-else>
<view :class="globalAppSettings.layout.home"> <view :class="globalAppSettings.layout.home">
<tm-translate v-for="(article, index) in articleList" :key="index" class="ani-item" <tm-translate v-for="(article, index) in articleList" :key="index" class="ani-item"
animation-name="fadeUp" :wait="calcAniWait(index)"> animation-name="fadeUp" :wait="calcAniWait(index)">
<article-card from="home" :article="article" :post="article" <article-card from="home" :article="article" :post="article"
@on-click="fnToArticleDetail"></article-card> @on-click="fnToArticleDetail"></article-card>
</tm-translate> </tm-translate>
</view> </view>
<view class="load-text mt-12">{{ loadMoreText }}</view> <view class="load-text mt-12">{{ loadMoreText }}</view>
<tm-flotbutton v-if="articleList.length > 10" color="light-blue" @click="fnToTopPage" size="m" <tm-flotbutton v-if="articleList.length > 10" color="light-blue" @click="fnToTopPage" size="m"
icon="icon-angle-up"></tm-flotbutton> icon="icon-angle-up"></tm-flotbutton>
</block> </block>
</block> </block>
</view> </view>
</template> </template>
<script> <script>
import tmMenubars from '@/tm-vuetify/components/tm-menubars/tm-menubars.vue'; import tmMenubars from '@/tm-vuetify/components/tm-menubars/tm-menubars.vue';
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue'; import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue'; import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue'; import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
import tmIcons from '@/tm-vuetify/components/tm-icons/tm-icons.vue'; import tmIcons from '@/tm-vuetify/components/tm-icons/tm-icons.vue';
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue'; import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
import eSwiper from '@/components/e-swiper/e-swiper.vue'; import eSwiper from '@/components/e-swiper/e-swiper.vue';
import qs from 'qs' import qs from 'qs'
export default { export default {
components: { components: {
tmMenubars, tmMenubars,
tmSkeleton, tmSkeleton,
tmTranslate, tmTranslate,
tmFlotbutton, tmFlotbutton,
tmIcons, tmIcons,
tmEmpty, tmEmpty,
eSwiper eSwiper
}, },
data() { data() {
return { return {
loading: 'loading', loading: 'loading',
queryParams: { queryParams: {
size: 5, size: 5,
page: 1, page: 1,
sort: ['spec.pinned,desc', 'spec.publishTime,desc'] sort: ['spec.pinned,desc', 'spec.publishTime,desc']
}, },
result: {}, result: {},
isLoadMore: false, isLoadMore: false,
loadMoreText: '加载中...', loadMoreText: '加载中...',
bannerCurrent: 0, bannerCurrent: 0,
bannerList: [], bannerList: [],
noticeList: [], noticeList: [],
articleList: [], articleList: [],
categoryList: [], categoryList: [],
}; };
}, },
computed: { computed: {
haloConfigs() { haloConfigs() {
return this.$tm.vx.getters().getConfigs; return this.$tm.vx.getters().getConfigs;
}, },
bloggerInfo() { bloggerInfo() {
const blogger = this.$tm.vx.getters().getConfigs.authorConfig.blogger; const blogger = this.$tm.vx.getters().getConfigs.authorConfig.blogger;
blogger.avatar = this.$utils.checkAvatarUrl(blogger.avatar, true); blogger.avatar = this.$utils.checkAvatarUrl(blogger.avatar, true);
return blogger; return blogger;
}, },
appInfo() { appInfo() {
const appInfo = this.haloConfigs.appConfig.appInfo; const appInfo = this.haloConfigs.appConfig.appInfo;
appInfo.logo = this.$utils.checkImageUrl(appInfo.logo) appInfo.logo = this.$utils.checkImageUrl(appInfo.logo)
return appInfo; return appInfo;
} }
}, },
onLoad() { onLoad() {
this.fnSetPageTitle(); this.fnSetPageTitle();
}, },
created() { created() {
this.fnQuery(); this.fnQuery();
}, },
onPullDownRefresh() { onPullDownRefresh() {
this.isLoadMore = false; this.isLoadMore = false;
this.queryParams.page = 1; this.queryParams.page = 1;
this.fnQuery(); this.fnQuery();
}, },
onReachBottom(e) {
if (this.result.hasNext) {
this.queryParams.page += 1;
this.isLoadMore = true;
this.fnGetArticleList();
} else {
uni.showToast({
icon: 'none',
title: '没有更多数据了'
});
}
},
methods: {
fnQuery() {
this.fnGetBanner();
this.fnGetArticleList();
this.fnGetCategoryList();
},
onReachBottom(e) { fnGetCategoryList() {
if (this.result.hasNext) { if (this.haloConfigs.pageConfig.homeConfig.useCategory) {
this.queryParams.page += 1; return;
this.isLoadMore = true; }
this.fnGetArticleList(); this.$httpApi.v2
} else { .getCategoryList({})
uni.showToast({ .then(res => {
icon: 'none', this.categoryList = res.items.sort((a, b) => {
title: '没有更多数据了' return b.postCount - a.postCount;
}); });
}
},
methods: {
fnQuery() {
this.fnGetBanner();
this.fnGetArticleList();
this.fnGetCategoryList();
},
fnGetCategoryList() { setTimeout(() => {
if (this.haloConfigs.basicConfig.auditModeEnabled) { this.loading = 'success';
return; }, 500);
} })
this.$httpApi.v2 .catch(err => {
.getCategoryList({}) console.error(err);
.then(res => { this.loading = 'error';
this.categoryList = res.items.sort((a, b) => { })
return b.postCount - a.postCount; .finally(() => {
}); setTimeout(() => {
uni.hideLoading();
uni.stopPullDownRefresh();
}, 500);
});
},
// 获取轮播图
fnGetBanner() {
if (this.haloConfigs.basicConfig.auditModeEnabled) {
return;
}
const _this = this;
const _format = function(list) {
return list.map((item, index) => {
return {
mp4: '',
id: item.metadata.name,
nickname: item.owner.displayName,
avatar: _this.$utils.checkAvatarUrl(item.owner.avatar),
address: '',
createTime: uni.$tm.dayjs(item.spec.publishTime).fromNow(),
title: item.spec.title,
src: _this.$utils.checkThumbnailUrl(item.spec.cover),
image: _this.$utils.checkThumbnailUrl(item.spec.cover)
};
});
};
setTimeout(() => { const paramsStr = qs.stringify(this.queryParams, {
this.loading = 'success'; allowDots: true,
}, 500); encodeValuesOnly: true,
}) skipNulls: true,
.catch(err => { encode: true,
console.error(err); arrayFormat: 'repeat'
this.loading = 'error'; })
}) uni.request({
.finally(() => { url: this.$baseApiUrl + '/apis/api.content.halo.run/v1alpha1/posts?' + paramsStr,
setTimeout(() => { method: 'GET',
uni.hideLoading(); success: (res) => {
uni.stopPullDownRefresh(); this.bannerList = _format(res.data.items);
}, 500); },
}); fail: (err) => {}
}, })
// 获取轮播图
fnGetBanner() {
const _this = this;
const _format = function (list) {
return list.map((item, index) => {
return {
mp4: '',
id: item.metadata.name,
nickname: item.owner.displayName,
avatar: _this.$utils.checkAvatarUrl(item.owner.avatar),
address: '',
createTime: uni.$tm.dayjs(item.spec.publishTime).fromNow(),
title: item.spec.title,
src: _this.$utils.checkThumbnailUrl(item.spec.cover),
image: _this.$utils.checkThumbnailUrl(item.spec.cover)
};
});
};
const paramsStr = qs.stringify(this.queryParams, { },
allowDots: true, fnOnBannerChange(e) {
encodeValuesOnly: true, this.bannerCurrent = e.current;
skipNulls: true, },
encode: true, fnOnBannerClick(item) {
arrayFormat: 'repeat' if (item.id == '') return;
}) this.fnToArticleDetail({
uni.request({ metadata: {
url: this.$baseApiUrl + '/apis/api.content.halo.run/v1alpha1/posts?' + paramsStr, name: item.id
method: 'GET', }
success: (res) => { });
this.bannerList = _format(res.data.items); },
}, // 文章列表
fail: (err) => { fnGetArticleList() {
} // 设置状态为加载中
}) if (!this.isLoadMore) {
this.loading = 'loading';
}
this.loadMoreText = '加载中...';
}, const paramsStr = qs.stringify(this.queryParams, {
fnOnBannerChange(e) { allowDots: true,
this.bannerCurrent = e.current; encodeValuesOnly: true,
}, skipNulls: true,
fnOnBannerClick(item) { encode: true,
if (item.id == '') return; arrayFormat: 'repeat'
this.fnToArticleDetail({ })
metadata: { uni.request({
name: item.id url: this.$baseApiUrl + '/apis/api.content.halo.run/v1alpha1/posts?' + paramsStr,
} method: 'GET',
}); success: (res) => {
}, const data = res.data;
// 文章列表 this.result.hasNext = data.hasNext;
fnGetArticleList() { if (this.isLoadMore) {
// 设置状态为加载中 this.articleList = this.articleList.concat(data.items);
if (!this.isLoadMore) { } else {
this.loading = 'loading'; this.articleList = data.items;
} }
this.loadMoreText = '加载中...'; this.loading = 'success';
this.loadMoreText = data.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
uni.hideLoading();
uni.stopPullDownRefresh();
},
fail: (err) => {
this.loading = 'error';
this.loadMoreText = '加载失败，请下拉刷新！';
uni.$tm.toast(err.message || '数据加载失败！');
uni.stopPullDownRefresh();
}
})
},
const paramsStr = qs.stringify(this.queryParams, { //跳转文章详情
allowDots: true, fnToArticleDetail(article) {
encodeValuesOnly: true, uni.navigateTo({
skipNulls: true, url: '/pagesA/article-detail/article-detail?name=' + article.metadata.name,
encode: true, animationType: 'slide-in-right'
arrayFormat: 'repeat' });
}) },
uni.request({ // 快捷导航页面跳转
url: this.$baseApiUrl + '/apis/api.content.halo.run/v1alpha1/posts?' + paramsStr, fnToNavPage(item) {
method: 'GET', switch (item.type) {
success: (res) => { case 'tabbar':
const data = res.data; uni.switchTab({
this.result.hasNext = data.hasNext; url: item.path
if (this.isLoadMore) { });
this.articleList = this.articleList.concat(data.items); break;
} else { case 'page':
this.articleList = data.items; uni.navigateTo({
} url: item.path
this.loading = 'success'; });
this.loadMoreText = data.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~'; break;
uni.hideLoading(); }
uni.stopPullDownRefresh(); },
}, // 分类页面
fail: (err) => { fnToCategoryPage() {
this.loading = 'error'; uni.switchTab({
this.loadMoreText = '加载失败，请下拉刷新！'; url: '/pages/tabbar/category/category'
uni.$tm.toast(err.message || '数据加载失败！'); });
uni.stopPullDownRefresh(); },
} // 所有的文章列表页面
}) fnToArticlesPage() {
}, uni.navigateTo({
url: '/pagesA/articles/articles'
});
},
//跳转文章详情 // 根据slug查询分类下的文章
fnToArticleDetail(article) { fnToCategoryBy(category) {
uni.navigateTo({ uni.navigateTo({
url: '/pagesA/article-detail/article-detail?name=' + article.metadata.name, url: `/pagesA/category-detail/category-detail?name=${category.metadata.name}&title=${category.spec.displayName}`
animationType: 'slide-in-right' });
}); },
},
// 快捷导航页面跳转
fnToNavPage(item) {
switch (item.type) {
case 'tabbar':
uni.switchTab({
url: item.path
});
break;
case 'page':
uni.navigateTo({
url: item.path
});
break;
}
},
// 分类页面
fnToCategoryPage() {
uni.switchTab({
url: '/pages/tabbar/category/category'
});
},
// 所有的文章列表页面
fnToArticlesPage() {
uni.navigateTo({
url: '/pagesA/articles/articles'
});
},
// 根据slug查询分类下的文章 fnChangeMode() {
fnToCategoryBy(category) { const isBlackTheme = this.$tm.vx.state().tmVuetify.black;
uni.navigateTo({ this.$tm.theme.setBlack(!isBlackTheme);
url: `/pagesA/category-detail/category-detail?name=${category.metadata.name}&title=${category.spec.displayName}` uni.setNavigationBarColor({
}); backgroundColor: !isBlackTheme ? '#0a0a0a' : '#ffffff',
}, frontColor: !isBlackTheme ? '#ffffff' : '#0a0a0a'
});
},
fnChangeMode() { fnToSearch() {
const isBlackTheme = this.$tm.vx.state().tmVuetify.black; uni.navigateTo({
this.$tm.theme.setBlack(!isBlackTheme); url: '/pagesA/articles/articles'
uni.setNavigationBarColor({ });
backgroundColor: !isBlackTheme ? '#0a0a0a' : '#ffffff', },
frontColor: !isBlackTheme ? '#ffffff' : '#0a0a0a' fnOnLogoToPage() {
}); uni.switchTab({
}, url: '/pages/tabbar/about/about'
})
fnToSearch() { }
uni.navigateTo({ }
url: '/pagesA/articles/articles' };
});
},
fnOnLogoToPage() {
uni.switchTab({
url: '/pages/tabbar/about/about'
})
}
}
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.app-page { .app-page {
width: 100vw; width: 100vw;
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
// background-color: #ffffff; // background-color: #ffffff;
.logo { .logo {
width: 60rpx; width: 60rpx;
height: 60rpx; height: 60rpx;
box-sizing: border-box; box-sizing: border-box;
} }
::v-deep { ::v-deep {
.tm-menubars .body .body_wk .left { .tm-menubars .body .body_wk .left {
min-width: initial; min-width: initial;
} }
} }
} }
.loading-wrap { .loading-wrap {
padding: 24rpx; padding: 24rpx;
} }
.search-input { .search-input {
background-color: #f5f5f5; background-color: #f5f5f5;
align-items: center; align-items: center;
/* #ifdef MP-WEIXIN */ /* #ifdef MP-WEIXIN */
margin-right: 24rpx; margin-right: 24rpx;
/* #endif */ /* #endif */
&_icon { &_icon {}
}
&_text { &_text {}
} }
}
.show-more { .show-more {
width: 42rpx; width: 42rpx;
height: 42rpx; height: 42rpx;
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.03); box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.03);
} }
.banner { .banner {
overflow: hidden; overflow: hidden;
} }
.quick-nav { .quick-nav {
background-color: #fff; background-color: #fff;
box-sizing: border-box; box-sizing: border-box;
// box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.03); // box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.03);
.name { .name {
color: var(--main-text-color); color: var(--main-text-color);
} }
} }
.category { .category {
width: 94vw; width: 94vw;
display: flex; display: flex;
height: 200rpx; height: 200rpx;
white-space: nowrap; white-space: nowrap;
margin: 0 24rpx; margin: 0 24rpx;
.content { .content {
display: inline-block; display: inline-block;
padding-left: 24rpx; padding-left: 24rpx;
&:first-child { &:first-child {
padding-left: 0; padding-left: 0;
} }
} }
.cate-empty { .cate-empty {
height: inherit; height: inherit;
} }
} }
.page-item { .page-item {
&_title { &_title {
position: relative; position: relative;
padding-left: 24rpx; padding-left: 24rpx;
font-size: 32rpx; font-size: 32rpx;
z-index: 1; z-index: 1;
color: var(--main-text-color); color: var(--main-text-color);
&:before { &:before {
content: ''; content: '';
position: absolute; position: absolute;
left: 0rpx; left: 0rpx;
top: 8rpx; top: 8rpx;
width: 8rpx; width: 8rpx;
height: 30rpx; height: 30rpx;
background-color: rgba(33, 150, 243, 1); background-color: rgba(33, 150, 243, 1);
border-radius: 6rpx; border-radius: 6rpx;
z-index: 0; z-index: 0;
} }
} }
} }
.h_row_col2 { .h_row_col2 {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
box-sizing: border-box; box-sizing: border-box;
padding: 0 12rpx; padding: 0 12rpx;
.ani-item { .ani-item {
width: 50%; width: 50%;
} }
} }
</style> </style>

2285
pagesA/article-detail/article-detail.vue
View File

File diff suppressed because it is too large Load Diff