addnews
This commit is contained in:
WanP
@@ -1,7 +1,4 @@
|
|||||||
# paipweb 项目
|
# paipweb 项目
|
||||||
|
|
||||||
这是一个基于 uni-app 框架开发的跨平台应用项目，支持 H5、微信小程序、支付宝小程序等多个平台。
|
|
||||||
|
|
||||||
## 项目概述
|
## 项目概述
|
||||||
|
|
||||||
- **项目名称**: paipweb
|
- **项目名称**: paipweb
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
|
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
|
||||||
</script>
|
</script>
|
||||||
<title>uni-app</title>
|
<title>uni-app</title>
|
||||||
<link rel="icon" type="image/png" href="@src/static/logo.png" />
|
<link rel="icon" type="image/png" href="/static/logo.png" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@@ -35,6 +35,12 @@
|
|||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": ""
|
"navigationBarTitleText": ""
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/components/news/news",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "新闻"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
|
|||||||
347
src/pages/components/news/news.vue
Normal file
347
src/pages/components/news/news.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<view class="page">
|
||||||
|
|
||||||
|
<Head></Head>
|
||||||
|
<!-- 内容区 -->
|
||||||
|
<view class="content">
|
||||||
|
<!-- 新闻区域 -->
|
||||||
|
<view class="news">
|
||||||
|
|
||||||
|
<!-- 轮播图 -->
|
||||||
|
<swiper v-if="post.imgs && post.imgs.length" :indicator-dots="false" :autoplay="false" :interval="3000"
|
||||||
|
:duration="1000" :circular="true" class="swiper-banner" @change="onChange">
|
||||||
|
<swiper-item v-for="(item, i) in post.imgs" :key="i">
|
||||||
|
<view class="swiper-center">
|
||||||
|
<image v-if="item.type === 'img'" :src="item.src" class="swiper-item" mode="aspectFit" alt="新闻图片" />
|
||||||
|
<video v-else :src="item.src" class="swiper-item" object-fit="contain" muted style="pointer-events:none;"
|
||||||
|
alt="新闻视频" />
|
||||||
|
<cover-view class="swiper-mask" @tap="common.openapp">
|
||||||
|
</cover-view>
|
||||||
|
</view>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
|
||||||
|
<!-- 外部指示点:2个及以上才显示 -->
|
||||||
|
<view v-if="post.imgs && post.imgs.length > 1" class="dots-bar">
|
||||||
|
<view v-for="(dot, i) in post.imgs" :key="i" class="dot" :class="{ active: i === current }" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 新闻标题 -->
|
||||||
|
<view v-if="post.title" class="newstitle">
|
||||||
|
<text class="title">{{ post.title }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部文案 -->
|
||||||
|
<view v-if="post.copywriting && post.date" class="newsbottom">
|
||||||
|
<text class="copywriting">{{ post.copywriting }}</text>
|
||||||
|
<view class="meta-info">
|
||||||
|
<text v-if="post.source" class="source">{{ post.source }}</text>
|
||||||
|
<text v-if="post.source" class="date-text">·</text>
|
||||||
|
<view class="datetextview">
|
||||||
|
<uni-dateformat :date="Date.parse(post.date.replace(/-/g, '/'))" :threshold="[0, 0]" format="yyyy-MM-dd"
|
||||||
|
class="date-text" />
|
||||||
|
<text class="date-text">{{ post.time }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="spacerview"></view>
|
||||||
|
<view class="toseeall">
|
||||||
|
<text class="toseealltext">查看全文</text>
|
||||||
|
<image src="@/static/imgs/arrowrightup/arrowrightup@3x.png" class="arrowrightupicon" mode="aspectFit"
|
||||||
|
alt="查看全文图标" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 评论区域 + 互动区域 -->
|
||||||
|
<Comments :comments="post.comments" :showInteraction="true" :collectsum="post.collectsum" :likesum="post.likesum" />
|
||||||
|
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { useCommonStore } from '@/stores/common.js'
|
||||||
|
import Head from '@/pages/components/head/head.vue'
|
||||||
|
import Comments from '@/pages/components/comments/comments.vue'
|
||||||
|
const common = useCommonStore()
|
||||||
|
|
||||||
|
// 当前 dot
|
||||||
|
const current = ref(0)
|
||||||
|
const onChange = e => current.value = e.detail.current
|
||||||
|
|
||||||
|
// 动态数据
|
||||||
|
const post = ref({})
|
||||||
|
|
||||||
|
// 模拟获取数据函数
|
||||||
|
const fetchPostData = async () => {
|
||||||
|
try {
|
||||||
|
// 使用uni.request替代axios
|
||||||
|
const response = await new Promise((resolve, reject) => {
|
||||||
|
uni.request({
|
||||||
|
url: '', // 这里可以填写实际API地址
|
||||||
|
method: 'GET',
|
||||||
|
timeout: 1000,
|
||||||
|
success: resolve,
|
||||||
|
fail: reject
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
// 处理数据...
|
||||||
|
const mockData = {
|
||||||
|
userId: 1000011,
|
||||||
|
userName: 'Kun Chang-Min',
|
||||||
|
userImg: '/static/logo.png',
|
||||||
|
date: '2024-12-03',
|
||||||
|
time: '14:00',
|
||||||
|
title: '智能体是人类智慧的延伸，它们将成为我们最强大的工具，也是最亲密的朋友。',
|
||||||
|
source: '36氪',
|
||||||
|
copywriting: '智能体是人类智慧的延伸，它们将成为我们最强大的工具，也是最亲密的朋友。',
|
||||||
|
current: 0,
|
||||||
|
isfollow: false,
|
||||||
|
collectsum: 114514,
|
||||||
|
likesum: 114514,
|
||||||
|
imgs: [
|
||||||
|
{ type: 'video', src: '/static/videos/beauty.mp4' }
|
||||||
|
],
|
||||||
|
comments: [
|
||||||
|
{
|
||||||
|
id: 101,
|
||||||
|
userName: 'Brad Lewin',
|
||||||
|
atUsers: ['JackyLove'],
|
||||||
|
content: '今天天气真不错~',
|
||||||
|
date: '2024-12-01',
|
||||||
|
likeCount: 99999,
|
||||||
|
showChild: false,
|
||||||
|
children: [
|
||||||
|
{ id: 201, userName: 'Alice', content: '快智能体是人类智慧的延伸，它们将成为我们最强大的工具，也是最亲密的朋友。智能体是人类智慧的延伸', atUsers: ['Brad Lewin', 'JackyLove'], date: '2024-12-01', likeCount: 2 },
|
||||||
|
{ id: 202, userName: 'Bob', content: '我同意你的观点。我记得喜欢这个版本。这个新版本对我来说Nothing好处', atUsers: [], date: '2024-12-01', likeCount: 1 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 102,
|
||||||
|
userName: 'Leanne Simpson',
|
||||||
|
atUsers: ['Theshy'],
|
||||||
|
content: '有人一起开黑吗？',
|
||||||
|
date: '2024-12-02',
|
||||||
|
likeCount: 1145140,
|
||||||
|
showChild: false,
|
||||||
|
children: [
|
||||||
|
{ id: 203, userName: 'Carol', content: '带我一个', atUsers: [], date: '2024-12-02', likeCount: 3 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 103,
|
||||||
|
userName: 'Tom Hardy',
|
||||||
|
atUsers: [],
|
||||||
|
content: '主评论3：分享一张今晚的月亮。',
|
||||||
|
date: '2024-12-03',
|
||||||
|
likeCount: 999,
|
||||||
|
showChild: false,
|
||||||
|
children: []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
// 将模拟数据赋值给post
|
||||||
|
post.value = mockData
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取数据失败:', error)
|
||||||
|
// 如果获取失败，使用默认数据
|
||||||
|
post.value = {
|
||||||
|
userId: 1000011,
|
||||||
|
userName: 'Kun Chang-Min',
|
||||||
|
userImg: '/static/logo.png',
|
||||||
|
date: '2024-12-03',
|
||||||
|
title: '人工智能技术的最新突破',
|
||||||
|
source: '科技日报',
|
||||||
|
copywriting: '智能体是人类智慧的延伸，它们将成为我们最强大的工具，也是最亲密的朋友。',
|
||||||
|
current: 0,
|
||||||
|
isfollow: false,
|
||||||
|
collectsum: 114514,
|
||||||
|
likesum: 114514,
|
||||||
|
imgs: [
|
||||||
|
{ type: 'img', src: '/static/logo.png' }
|
||||||
|
],
|
||||||
|
comments: []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 组件挂载时获取数据
|
||||||
|
onMounted(() => {
|
||||||
|
fetchPostData()
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
page,
|
||||||
|
.page {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 0;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spacerview {
|
||||||
|
flex: 1;
|
||||||
|
height: 0;
|
||||||
|
pointer-events: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
flex-shrink: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news {
|
||||||
|
width: 100%;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-banner {
|
||||||
|
width: 100%;
|
||||||
|
height: 357px
|
||||||
|
}
|
||||||
|
|
||||||
|
swiper-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-center {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-item {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-center {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-mask {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dots-bar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 8px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(0, 0, 0, .2);
|
||||||
|
transition: background .3s
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot.active {
|
||||||
|
background: #333
|
||||||
|
}
|
||||||
|
|
||||||
|
.newstitle {
|
||||||
|
padding: 16px 16px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-family: PingFangSC;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-stretch: normal;
|
||||||
|
font-style: normal;
|
||||||
|
line-height: 1.6;
|
||||||
|
letter-spacing: 0.6px;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.newsbottom {
|
||||||
|
padding: 16px 16px 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copywriting {
|
||||||
|
font-family: PingFangSC;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
font-style: normal;
|
||||||
|
line-height: 1.86;
|
||||||
|
letter-spacing: 0.4px;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.source,
|
||||||
|
.date-text {
|
||||||
|
font-family: PingFangSC;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
font-style: normal;
|
||||||
|
line-height: normal;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-align: left;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetextview {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toseeall {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toseealltext {
|
||||||
|
font-family: PingFangSC;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
font-stretch: normal;
|
||||||
|
font-style: normal;
|
||||||
|
line-height: normal;
|
||||||
|
letter-spacing: 0.46px;
|
||||||
|
color: #7c45ed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrowrightupicon {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -30,8 +30,8 @@
|
|||||||
</swiper-item>
|
</swiper-item>
|
||||||
</swiper>
|
</swiper>
|
||||||
|
|
||||||
<!-- 外部指示点 -->
|
<!-- 外部指示点:2个及以上才显示 -->
|
||||||
<view v-if="post.imgs && post.imgs.length" class="dots-bar">
|
<view v-if="post.imgs && post.imgs.length > 1" class="dots-bar">
|
||||||
<view v-for="(dot, i) in post.imgs" :key="i" class="dot" :class="{ active: i === current }" />
|
<view v-for="(dot, i) in post.imgs" :key="i" class="dot" :class="{ active: i === current }" />
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@@ -47,12 +47,7 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 评论区域 + 互动区域 -->
|
<!-- 评论区域 + 互动区域 -->
|
||||||
<Comments
|
<Comments :comments="post.comments" :showInteraction="true" :collectsum="post.collectsum" :likesum="post.likesum" />
|
||||||
:comments="post.comments"
|
|
||||||
:showInteraction="true"
|
|
||||||
:collectsum="post.collectsum"
|
|
||||||
:likesum="post.likesum"
|
|
||||||
/>
|
|
||||||
|
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
@@ -99,7 +94,7 @@ const fetchPostData = async () => {
|
|||||||
likesum: 114514,
|
likesum: 114514,
|
||||||
imgs: [
|
imgs: [
|
||||||
{ type: 'img', src: '/static/logo.png' },
|
{ type: 'img', src: '/static/logo.png' },
|
||||||
{ type: 'video', src: '/static/videos/啊米诺斯.mp4' },
|
{ type: 'video', src: '/static/videos/beauty.mp4' },
|
||||||
{ type: 'img', src: '/static/imgs/comment.webp' },
|
{ type: 'img', src: '/static/imgs/comment.webp' },
|
||||||
{ type: 'img', src: '/static/imgs/image-138.webp' }
|
{ type: 'img', src: '/static/imgs/image-138.webp' }
|
||||||
],
|
],
|
||||||
@@ -322,310 +317,11 @@ swiper-item {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.date-text {
|
.date-text {
|
||||||
color: #b1aeb2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment {
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.commenthead {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
width: 100%;
|
|
||||||
height: 29px;
|
|
||||||
margin-bottom: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.commentcount {
|
|
||||||
width: fit-content;
|
|
||||||
height: 100%;
|
|
||||||
font-family: PingFangSC;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
font-stretch: normal;
|
|
||||||
font-style: normal;
|
|
||||||
line-height: normal;
|
|
||||||
letter-spacing: normal;
|
|
||||||
text-align: left;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.headswitch {
|
|
||||||
width: 102px;
|
|
||||||
height: 100%;
|
|
||||||
flex-grow: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-around;
|
|
||||||
border-radius: 24px;
|
|
||||||
padding: 2px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
background-color: #f0eef1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.headswitch .inact,
|
|
||||||
.act {
|
|
||||||
width: 48px;
|
|
||||||
height: 23px;
|
|
||||||
font-size: 12px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-family: PingFangSC;
|
|
||||||
font-weight: normal;
|
|
||||||
font-stretch: normal;
|
|
||||||
font-style: normal;
|
|
||||||
line-height: normal;
|
|
||||||
letter-spacing: normal;
|
|
||||||
color: #110c13;
|
|
||||||
}
|
|
||||||
|
|
||||||
.headswitch .inact {
|
|
||||||
border-radius: 24px;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.commentdetail {
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.commentdetailleft {
|
|
||||||
width: 31.7px;
|
|
||||||
height: 31.7px;
|
|
||||||
margin-right: 12.2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.commentdetailleft image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.commentdetailright {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.maincomment {
|
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.commentdetailcontent {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.commentusername {
|
|
||||||
width: fit-content;
|
|
||||||
height: 18px;
|
|
||||||
font-family: PingFangSC;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: normal;
|
|
||||||
font-stretch: normal;
|
|
||||||
font-style: normal;
|
|
||||||
line-height: normal;
|
|
||||||
letter-spacing: normal;
|
|
||||||
text-align: left;
|
|
||||||
color: #b1aeb2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.commentusercontent {
|
|
||||||
font-family: PingFangSC;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: normal;
|
|
||||||
font-stretch: normal;
|
|
||||||
font-style: normal;
|
|
||||||
line-height: normal;
|
|
||||||
letter-spacing: normal;
|
|
||||||
text-align: left;
|
|
||||||
margin: 4px 0 10px;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-reply {
|
|
||||||
height: 17px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-text,
|
|
||||||
.replytext {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 17px;
|
height: 17px;
|
||||||
line-height: 17px;
|
line-height: 17px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
|
||||||
|
|
||||||
.date-text {
|
|
||||||
color: #b1aeb2;
|
color: #b1aeb2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.replytext {
|
|
||||||
color: #918e93;
|
|
||||||
}
|
|
||||||
|
|
||||||
.commentlike {
|
|
||||||
height: 43px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6.7px;
|
|
||||||
padding: 2px 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.commentlikecount {
|
|
||||||
min-width: 40px;
|
|
||||||
height: 17px;
|
|
||||||
font-family: PingFangSC;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: normal;
|
|
||||||
font-stretch: normal;
|
|
||||||
font-style: normal;
|
|
||||||
line-height: 17px;
|
|
||||||
letter-spacing: normal;
|
|
||||||
text-align: center;
|
|
||||||
padding: 0 4px;
|
|
||||||
color: #918e93;
|
|
||||||
}
|
|
||||||
|
|
||||||
.commentchildcontainer {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
margin: 14px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.commentchild {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.commentchildleft {
|
|
||||||
width: 23.5px;
|
|
||||||
height: 23.5px;
|
|
||||||
margin-right: 8.2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.commentchildleft image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.commentchildright {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.expandcomment {
|
|
||||||
width: 96px;
|
|
||||||
height: 17px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: row;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.expandcommenttext {
|
|
||||||
flex: 1;
|
|
||||||
font-family: PingFangSC;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: normal;
|
|
||||||
font-stretch: normal;
|
|
||||||
font-style: normal;
|
|
||||||
line-height: normal;
|
|
||||||
letter-spacing: normal;
|
|
||||||
text-align: left;
|
|
||||||
color: #110c13;
|
|
||||||
}
|
|
||||||
|
|
||||||
.interaction {
|
|
||||||
width: 100%;
|
|
||||||
border: solid 1px #faf9fb;
|
|
||||||
background-color: #faf9fb;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 11.5px 16px;
|
|
||||||
flex-direction: row;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editarea {
|
|
||||||
flex: 1;
|
|
||||||
height: 40px;
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 24px;
|
|
||||||
gap: 12px;
|
|
||||||
padding: 0 20px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editicon {
|
|
||||||
width: 13.3px;
|
|
||||||
height: 14.6px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edittext {
|
|
||||||
flex: 1;
|
|
||||||
flex-grow: 0;
|
|
||||||
font-family: PingFangSC;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: normal;
|
|
||||||
font-stretch: normal;
|
|
||||||
font-style: normal;
|
|
||||||
line-height: 40px;
|
|
||||||
letter-spacing: normal;
|
|
||||||
text-align: left;
|
|
||||||
color: #918e93;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.collection,
|
|
||||||
.like {
|
|
||||||
height: 40px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
gap: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.collectionicon,
|
|
||||||
.likeicon {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.collectioncount,
|
|
||||||
.likecount {
|
|
||||||
height: 17px;
|
|
||||||
font-family: SFPro;
|
|
||||||
font-size: 17px;
|
|
||||||
font-weight: 500;
|
|
||||||
font-stretch: normal;
|
|
||||||
font-style: normal;
|
|
||||||
line-height: normal;
|
|
||||||
letter-spacing: normal;
|
|
||||||
text-align: left;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -3,7 +3,8 @@
|
|||||||
<!-- 内容区 -->
|
<!-- 内容区 -->
|
||||||
<view class="maincontent">
|
<view class="maincontent">
|
||||||
<!-- <Postpage /> -->
|
<!-- <Postpage /> -->
|
||||||
<Videopage />
|
<!-- <Videopage /> -->
|
||||||
|
<News />
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- Findmore组件 -->
|
<!-- Findmore组件 -->
|
||||||
@@ -15,11 +16,9 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import Postpage from '@/pages/components/postpage/postpage.vue'
|
import Postpage from '@/pages/components/postpage/postpage.vue'
|
||||||
import Videopage from '@/pages/components/videopage/videopage.vue';
|
import Videopage from '@/pages/components/videopage/videopage.vue';
|
||||||
|
import News from '@/pages/components/news/news.vue';
|
||||||
import Findmore from '@/pages/components/findmore/findmore.vue';
|
import Findmore from '@/pages/components/findmore/findmore.vue';
|
||||||
|
|
||||||
import { useCommonStore } from '@/stores/common.js'
|
|
||||||
const common = useCommonStore()
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
BIN
src/static/imgs/arrowrightup/arrowrightup.png
Normal file
BIN
src/static/imgs/arrowrightup/arrowrightup.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 228 B |
BIN
src/static/imgs/arrowrightup/arrowrightup@2x.png
Normal file
BIN
src/static/imgs/arrowrightup/arrowrightup@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 292 B |
BIN
src/static/imgs/arrowrightup/arrowrightup@3x.png
Normal file
BIN
src/static/imgs/arrowrightup/arrowrightup@3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 349 B |
Reference in New Issue
Block a user