Skip to content

C
csssp-xcx-h5
提交 4198eee7 authored 作者: 劳广强's avatar 劳广强
浏览文件
操作

feat: 完成 首页 和 文章详情页 页面

上级 c6f1d43d
显示空白字符变更
内嵌 并排
正在显示 包含 715 行增加 和 207 行删除
components/TaskItem.vue deleted 100644 → 0
浏览文件 @ c6f1d43d
<template>
<view>
<view class="task_content_list">
<view class="task_list_left">
<image v-if="taskData.icon" mode="aspectFill" class="left" src="@/static/img_renwu2@2x.png" />
<image v-else mode="aspectFill" class="left" src="@/static/img_renwu@2x.png" />
<view class="right">
<view :class="['task_title', taskData.titleStatus ? 'task_title_active' : '']">{{ taskData.title }}</view>
<template v-if="taskData.tagStatus">
<text v-for="(item, index) in taskData.tagList" :key="item.id" :class="['received', item.active ? 'received_acitve' : '']">{{ item.name }}</text>
</template>
<view class="task_date_box">
<image mode="aspectFill" class="thing_icon" src="@/static/ic_renwushijian@2x.png" />
<view class="task_date">{{ taskData.startDate }} —— {{ taskData.endDate }}</view>
</view>
</view>
</view>
<view v-if="taskData.pointsStatus === 0" class="task_list_right">
<view class="notice_right_number task_number">{{ taskData.pointsCount }}</view>
<image class="notice_right_icon" src="@/static/ic_jifen_zuo@2x.png" />
</view>
<view v-if="taskData.pointsStatus === 1" @click.stop="articleFollow(taskData.id)" class="task_list_right task_list_right_sc">
<image class="notice_right_sc_icon" src="@/static/ic_sc_rw@2x.png" />
</view>
<view v-if="taskData.pointsStatus === 2" class="task_list_right"> </view>
</view>
</view>
</template>
<script>
import { request } from '@/utils/util';
export default {
name: 'TaskItem',
props: {
/**
* 组件的属性列表
*/
taskData: {
type: Object,
value: {
id: 0,
title: '',
titleStatus: true,
tagStatus: false,
tagList: [
{
id: 0,
active: false,
name: '',
},
],
startDate: '',
endDate: '',
icon: false,
pointsStatus: 0,
pointsCount: 0,
},
},
},
data() {
return {
taskDetail: '',
};
},
methods: {
// 关注 取消关注
async articleFollow(id) {
uni.showModal({
title: '取消关注',
content: '确定要取消关注吗？',
success: async (res) => {
if (!res.confirm) return;
let token = uni.getStorageSync('token');
await request.post(`/api/task_follow/create?token=${token}`, { task_id: id });
this.$emit('ArticleFollow');
},
});
},
},
};
</script>
<style scoped>
.task_content_list {
width: 100%;
padding: 34rpx 0;
border-bottom: 2rpx solid #f6f6f6;
display: flex;
justify-content: space-between;
align-items: center;
}
.task_list_left {
flex: 4;
display: flex;
justify-content: flex-start;
/* align-items: center; */
}
.task_list_left .left {
min-width: 91rpx;
max-width: 92rpx;
height: 92rpx;
}
.task_list_left .right {
margin-left: 27rpx;
}
.task_title {
font-size: 28rpx;
font-weight: 500;
color: #333333;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.task_title_active {
color: #999999;
}
.received {
width: 70%;
padding: 0 8rpx;
border-radius: 10rpx;
border: 2rpx solid #8171fc;
color: #8171fc;
font-weight: 500;
font-size: 22rpx;
margin-left: 5rpx;
margin-right: 20rpx;
margin-bottom: 18rpx;
}
.received_acitve {
border: 2rpx solid #fe9731;
color: #fe9731;
}
.task_date_box {
margin-top: 18rpx;
display: flex;
justify-content: flex-start;
align-items: center;
}
.task_date {
font-size: 24rpx;
font-weight: 500;
color: #999999;
margin-left: 14rpx;
}
.thing_icon {
width: 26rpx;
height: 28rpx;
}
.task_list_right {
flex: 1;
height: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
align-self: flex-start;
}
.task_list_right_sc {
justify-content: center;
align-items: center;
align-self: center;
}
.notice_right_sc_icon {
width: 30rpx;
height: 30rpx;
}
.task_list_right_none {
/* width: 50rpx; */
}
.task_number {
font-size: 28rpx;
font-weight: 700;
color: #8171fc;
margin-right: 12rpx;
}
.notice_right_icon {
width: 40rpx;
height: 40rpx;
}
</style>
pages.json
浏览文件 @ 4198eee7
{ {
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages "pages": [
//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{ {
"path": "pages/index/index", "path": "pages/index/index",
"style": { "style": {
"navigationStyle": "custom", "navigationStyle": "custom",
"navigationBarTitleText": "uni-app" "navigationBarTitleText": "首页"
} }
},
{
"path": "pages/record/index",
"style": {
"navigationBarTitleText": "随手拍",
"enablePullDownRefresh": false
}
},
{
"path": "pages/mine/index",
"style": {
"navigationBarTitleText": "我的",
"enablePullDownRefresh": false
}
},
{
"path": "pages/article-detail/index",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
],
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "static/tabbar/ic_shouye1@2x.png",
"selectedIconPath": "static/tabbar/ic_shouye2@2x.png",
"text": "首页"
},
{
"pagePath": "pages/record/index",
"iconPath": "static/tabbar/ic_shuishoupai1@2x.png",
"selectedIconPath": "static/tabbar/ic_shuishoupai2@2x.png",
"text": "随手拍"
},
{
"pagePath": "pages/mine/index",
"iconPath": "static/tabbar/ic_wode1@2x.png",
"selectedIconPath": "static/tabbar/ic_wode2@2x.png",
"text": "我的"
} }
], ],
"color": "#333333",
"selectedColor": "#8171FC",
"backgroundColor": "#FFF"
},
"globalStyle": { "globalStyle": {
"navigationStyle": "custom",
"navigationBarTextStyle": "black", "navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app", "navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8", "navigationBarBackgroundColor": "#F8F8F8",
......
pages/article-detail/index.scss 0 → 100644
浏览文件 @ 4198eee7
.article_head {
padding: 14rpx 30rpx 0 30rpx;
}
.title {
font-size: 48rpx;
font-weight: 500;
color: #000000;
}
.head_buttom {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 44rpx;
}
.left {
display: flex;
align-items: center;
}
.right {
font-size: 28rpx;
font-weight: Book;
color: #999999;
}
.browse {
display: flex;
align-items: center;
margin-right: 50rpx;
}
.browse_icon {
width: 36rpx;
height: 36rpx;
}
.browse_number {
font-size: 24rpx;
font-weight: Book;
color: #666666;
margin-left: 12rpx;
}
.img {
width: 100%;
height: 388rpx;
margin-top: 46rpx;
}
.img_source {
display: flex;
justify-content: center;
align-items: center;
font-size: 24rpx;
font-weight: 400;
color: #909090;
}
.article_detail {
padding: 0 30rpx 160rpx 30rpx;
font-size: 36rpx;
text-align: justify;
font-weight: 400;
color: #000000;
margin-top: 40rpx;
}
.buttom_btn {
position: fixed;
bottom: 0;
width: 100%;
background: #fff;
border-top: 2rpx solid #e4e4e4;
}
.btn_box {
padding: 24rpx 30rpx 40rpx;
display: flex;
justify-content: space-around;
align-items: center;
}
.btn_box_item {
width: 210rpx;
height: 76rpx;
background: #f7f6ff;
border-radius: 38rpx;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}
.btn_box_item::after {
border: none;
}
.share_pyq_btn {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #fff;
padding: 0;
margin: 0;
}
.share_pyq_btn::after {
border: none;
}
.share_box {
padding: 20rpx 0;
}
.share_pyq {
display: flex;
justify-content: center;
align-items: center;
background: #fff;
padding: 20rpx 0;
font-size: 36rpx;
border-top: 2rpx solid #f6f6f6;
}
/* 朋友圈提示 */
.share_bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
align-items: center;
justify-content: center;
z-index: 109;
}
.share_bg_box {
display: flex;
justify-content: flex-end;
margin-right: 100rpx;
}
.img_pyq_tip {
width: 354rpx;
height: 152rpx;
}
.share_img {
width: 48rpx;
height: 48rpx;
}
.item_active {
width: 210rpx;
height: 76rpx;
background: #ff6868;
border-radius: 38rpx;
display: flex;
justify-content: center;
align-items: center;
}
.item_active2 {
width: 210rpx;
height: 76rpx;
background: #8171fc;
border-radius: 38rpx;
display: flex;
justify-content: center;
align-items: center;
}
.btn_icon {
width: 46rpx;
height: 46rpx;
}
pages/article-detail/index.vue 0 → 100644
浏览文件 @ 4198eee7
<template>
<view>
<view class="article_head">
<view class="title">{{ $u.getProperty(articleDetail, 'detail.title') }}</view>
<view class="head_buttom">
<view class="left">
<view class="browse">
<image class="browse_icon" mode="aspectFill" src="/static/icon/ic_wz_kanguo@2x.png" />
<view class="browse_number">{{ $u.getProperty(articleDetail, 'detail.views_num') }}</view>
</view>
<view class="browse">
<image class="browse_icon" mode="aspectFill" src="/static/icon/ic_wz_dianzan1@2x.png" />
<view class="browse_number">{{ likes_num }}</view>
</view>
</view>
<view class="right">{{ created }}</view>
</view>
</view>
<!-- <image class="img" mode="aspectFill" src="{{articleDetail.detail.img}}" /> -->
<view class="img_source">{{ $u.getProperty(articleDetail, 'detail.soure') }}</view>
<view class="article_detail">
<u-parse :content="content" />
</view>
<view class="buttom_btn">
<view class="btn_box">
<view :class="[!follow ? 'btn_box_item' : 'item_active']" bindtap="follow">
<image v-if="!follow" class="btn_icon" mode="aspectFill" src="/static/icon/ic_wz_guanzhu1@2x.png" />
<image v-else class="btn_icon" mode="aspectFill" src="/static/icon/ic_wz_guanzhu3@2x.png" />
</view>
<view :class="[!fabulous ? 'btn_box_item' : 'item_active2']" bindtap="fabulous">
<image v-if="!fabulous" class="btn_icon" mode="aspectFill" src="/static/icon/ic_wz_dianzan1@2x.png" />
<image v-else class="btn_icon" mode="aspectFill" src="/static/icon/ic_wz_dianzan3@2x.png" />
</view>
<button class="btn_box_item" bindtap="showTip">
<image class="btn_icon" mode="aspectFill" src="/static/icon/ic_fenxiang@2x.png" />
</button>
</view>
<van-action-sheet v-show="showTip" cancel-text="取消" bind:close="close" bind:cancel="cancelShare">
<view class="share_box">
<button open-type="share" class="share_pyq_btn">分享给好友</button>
<view bindtap="sharePYQ" class="share_pyq">分享到朋友圈</view>
</view>
</van-action-sheet>
</view>
<view class="share_bg" bindtap="closetipPyq" v-if="tipPyq">
<view class="share_bg_box">
<image mode="aspectFill" class="img_pyq_tip" src="/static/img_pyq_tip@2x.png" />
</view>
</view>
</view>
</template>
<script>
import { articleDetail } from '@/pages/article-detail/mock';
export default {
data() {
return {
articleDetail: {},
title: '',
likes_num: '',
id: null,
follow: false,
content: '',
fabulous: false,
ifshare: true,
tipPyq: false, // 朋友圈提示
showTip: false, // 分享提示
};
},
onLoad(query) {
console.log(query);
this.articleDetail = articleDetail;
this.fetchArticleDetail();
},
methods: {
async fetchArticleDetail() {
const token = uni.getStorageSync('token');
this.ifshare = true;
this.articleDetail = articleDetail;
this.created = articleDetail.detail.created.substring(0, 10);
this.title = articleDetail.detail.title;
this.follow = articleDetail.follow_status;
this.fabulous = articleDetail.like_status;
this.likes_num = articleDetail.detail.likes_num;
this.content = articleDetail.detail.content;
},
},
};
</script>
<style scoped lang="scss">
@import 'index.scss';
</style>
pages/article-detail/mock.js 0 → 100644
浏览文件 @ 4198eee7
export const articleDetail = {
detail: {
object_name: 'article',
views_num: 30,
likes_num: 11,
content:
'<p style="line-height: 2;">\u4eca\u5e74\u662f\u4e2d\u56fd\u5c11\u5e74\u5148\u950b\u961f\u5efa\u961f72\u5468\u5e74\uff0c\u4e3a\u57f9\u80b2\u5c11\u5148\u961f\u5458\u7684\u8d23\u4efb\u611f\u548c\u4f7f\u547d\u611f\uff0c\u5728&ldquo;\u5341\u4e00\u4e09&rdquo;\u5efa\u961f\u65e5\u6765\u4e34\u4e4b\u9645\uff0c\u9752\u79c0\u533a\u957f\u5858\u9547\u4e2d\u5fc3\u5b66\u6821\u5f00\u5c55\u4e86&ldquo;\u5b66\u4e60\u5c11\u5148\u961f\u77e5\u8bc6\uff0c\u89c4\u8303\u5c11\u5148\u961f\u793c\u4eea&rdquo;\u57f9\u8bad\u6d3b\u52a8\u3002</p>\r\n<p style="line-height: 2;">\u6765\u81ea\u5357\u5b81\u5e02\u6c11\u4e50\u8def\u5c0f\u5b66\u7684\u5c11\u5148\u961f\u5927\u961f\u8f85\u5bfc\u5458\u96f7\u857e\u5e26\u9886\u5927\u5bb6\u4e00\u8d77\u5b66\u4e60\u4e86\u300a\u4e2d\u56fd\u5c11\u5e74\u5148\u950b\u961f\u6807\u5fd7\u793c\u4eea\u57fa\u672c\u89c4\u8303\u300b\u3002\u57f9\u8bad\u4ece\u7ea2\u9886\u5dfe\u7684\u542b\u4e49\u3001\u4f69\u6234\u548c\u4f7f\u7528\u3001\u6267\u65d7\u3001\u547c\u53f7\u3001\u656c\u961f\u793c\u3001\u5165\u961f\u5ba3\u8a93\u3001\u5b66\u5531\u961f\u6b4c\u3001\u5c11\u5148\u961f\u961f\u4f1a\u4eea\u5f0f\u57fa\u672c\u7a0b\u5e8f\u7b49\u51e0\u4e2a\u65b9\u9762\u5c55\u5f00\u3002\u6d3b\u52a8\u4e2d\uff0c\u5927\u961f\u8f85\u5bfc\u5458\u96f7\u857e\u793a\u8303\u4f69\u6234\u7ea2\u9886\u5dfe\u3001\u6267\u961f\u65d7\u3001\u884c\u961f\u793c\uff0c\u4e2d\u961f\u8f85\u5bfc\u5458\u548c\u961f\u5458\u4eec\u4e00\u8fb9\u542c\uff0c\u4e00\u8fb9\u7ec3\uff0c\u5c0f\u961f\u5e72\u7eb7\u7eb7\u4e3e\u624b\u8981\u6c42\u5c55\u793a\u81ea\u5df1\u7684\u5b66\u4e60\u6210\u679c\u3002\u65e0\u8bba\u662f\u656c\u961f\u793c\u8fd8\u662f\u6267\u65d7\uff0c\u961f\u5458\u4eec\u90fd\u4ee5\u6807\u51c6\u3001\u89c4\u8303\u7684\u52a8\u4f5c\u4e25\u683c\u8981\u6c42\u81ea\u5df1\uff0c\u4ee5\u4fbf\u66f4\u597d\u5730\u4e3a\u5176\u4ed6\u5c11\u5148\u961f\u5458\u4eec\u505a\u597d\u699c\u6837\u793a\u8303\u3002</p>\r\n<p style="line-height: 2;"><img style="display: block; margin-left: auto; margin-right: auto;" src="http://qiniu.yuhuofei.it/2854.jpeg" alt="" width="815" height="611" /></p>\r\n<p style="line-height: 2;">\u901a\u8fc7\u672c\u6b21\u6d3b\u52a8\uff0c\u4e2d\u961f\u8f85\u5bfc\u5458\u548c\u961f\u5e72\u4eec\u91cd\u6e29\u4e86\u5c11\u5148\u961f\u793c\u4eea\uff0c\u5927\u5bb6\u5bf9\u5c11\u5148\u961f\u7ec4\u7ec7\u6709\u4e86\u66f4\u6df1\u7684\u8ba4\u8bc6\uff0c\u6bcf\u4f4d\u961f\u5458\u60c5\u7eea\u9ad8\u6602\uff0c\u7cbe\u795e\u9971\u6ee1\uff0c\u7eb7\u7eb7\u8868\u793a\u5c06\u5e26\u9886\u5168\u4f53\u961f\u5458\u4e89\u505a\u65b0\u65f6\u4ee3\u597d\u961f\u5458\uff0c\u79c9\u627f\u5c11\u5148\u961f\u7ec4\u7ec7\u7684\u4f18\u826f\u4f20\u7edf\uff0c\u542c\u515a\u8bdd\u3001\u8ddf\u515a\u8d70\uff0c\u53d1\u6325\u5c11\u5148\u961f\u5458\u7684\u529b\u91cf\uff0c\u505a\u597d\u65b0\u65f6\u4ee3\u793e\u4f1a\u4e3b\u4e49\u63a5\u73ed\u4eba\uff0c\u52aa\u529b\u6210\u4e3a\u5efa\u8bbe\u7956\u56fd\u7684\u4e3b\u529b\u519b\u3002</p>\r\n<p style="line-height: 2;">\u6765\u81ea\u516d\uff081\uff09\u4e2d\u961f\u7684\u8f85\u5bfc\u5458\u6881\u8001\u5e08\u8bf4\uff0c\u8fd9\u6837\u7684\u57f9\u8bad\u5f88\u6709\u610f\u4e49\uff0c\u961f\u5458\u4eec\u5728\u91cd\u6e29\u961f\u77e5\u8bc6\u4e2d\u66f4\u52a0\u7684\u70ed\u7231\u7ea2\u9886\u5dfe\uff0c\u70ed\u7231\u5c11\u5148\u961f\uff0c\u770b\u7740\u961f\u5458\u656c\u961f\u793c\u65f6\u575a\u6bc5\u7684\u76ee\u5149\u5979\u7279\u522b\u611f\u52a8\u3002\u5979\u8868\u793a\u5728\u4eca\u540e\u7684\u65e5\u5e38\u5c11\u5148\u961f\u5de5\u4f5c\u548c\u6d3b\u52a8\u4e2d\uff0c\u4f1a\u4e25\u683c\u6267\u884c\u300a\u4e2d\u56fd\u5c11\u5e74\u5148\u950b\u961f\u6807\u5fd7\u793c\u4eea\u57fa\u672c\u89c4\u8303\u300b\uff0c\u6559\u80b2\u5c11\u5148\u961f\u5458\u70ed\u7231\u7ea2\u9886\u5dfe\uff0c\u8df5\u884c\u961f\u793c\u7cbe\u795e\uff0c\u589e\u5f3a\u5c11\u5148\u961f\u5458\u7684\u81ea\u8c6a\u611f\u548c\u8363\u8a89\u611f\u3002</p>',
weight: 2,
created: '2021-10-11 16:39:09',
img: 'https://qiniu.gx-stbd.com/FoCZur8RhDEjQhhiFufV8Vp7R4Vs',
status: 1,
article_type: { object_name: 'articletype', status: 1, object_type: 'default', name: '\u5927\u57ce\u5c0f\u4e8b', id: 15, weight: 1 },
object_type: 'default',
id: 60,
title: '\u8fce\u201c\u5efa\u961f\u65e5\u201d \u9752\u79c0\u533a\u957f\u5858\u9547\u4e2d\u5fc3\u5b66\u6821\u89c4\u8303\u5c11\u5148\u961f\u793c\u4eea',
get_like_num: 11,
},
like_status: false,
follow_status: false,
};
pages/index/index.scss 0 → 100644
浏览文件 @ 4198eee7
page {
background-image: url('@/static/index_bg.png');
background-size: 100%;
background-position: top center;
background-repeat: no-repeat;
}
.wrapper {
}
.logo {
display: block;
width: 358rpx;
}
.address {
display: flex;
align-items: center;
&-text {
font-size: 24rpx;
text-align: right;
color: #ffffff;
margin-right: 16rpx;
}
&-icon {
$size: 34rpx;
width: $size;
height: $size;
display: block;
}
}
.banner {
border-radius: 15rpx;
padding: 0 30rpx;
overflow: hidden;
&-list {
height: 350rpx;
border-radius: 15rpx;
overflow: hidden;
}
&-item {
width: 100%;
height: 100%;
}
&-img {
width: 100%;
height: 100%;
border-radius: 15rpx;
}
}
/* 修改圆点样式 */
::v-deep .uni-swiper-dots.uni-swiper-dots-horizontal {
margin-bottom: 0rpx;
float: left;
text-align: center;
}
::v-deep .uni-swiper-dot::before {
content: '';
flex-grow: 1;
background: #fff;
border-radius: 15rpx;
border: 0rpx;
}
::v-deep .uni-swiper-dot.uni-swiper-dot {
width: 14rpx;
height: 6rpx;
opacity: 0.5;
background: #ffffff;
border-radius: 4rpx;
}
::v-deep .uni-swiper-dot.uni-swiper-dot-active {
width: 22rpx;
height: 6rpx;
opacity: 1;
background: #ffffff;
border-radius: 4rpx;
}
.notice {
height: (72rpx * 3);
padding: 0 30rpx;
&-content {
font-size: 28rpx;
font-weight: 400;
color: #333333;
}
&-box {
border-top-color: #f6f6f6;
background: #ffffff;
box-shadow: 0rpx 2rpx 0rpx 0rpx #f6f6f6 inset;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15rpx 0;
}
&-right {
width: 104rpx;
display: flex;
justify-content: flex-start;
align-items: center;
&-icon {
width: 40rpx;
height: 40rpx;
}
&-number {
font-size: 28rpx;
font-weight: 700;
color: #8171fc;
margin-left: 12rpx;
}
}
}
.article {
padding: 0 30rpx;
&-list {
width: 100%;
padding: 40rpx 0;
display: flex;
align-items: center;
overflow-x: scroll;
}
&-item {
flex: 1;
margin-right: 0;
padding: 0 46rpx 0 55rpx;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
&-name {
&--none {
width: 128rpx;
font-size: 32rpx;
font-weight: 500;
text-align: center;
}
&--action {
width: 128rpx;
font-size: 32rpx;
font-weight: 500;
color: #8171fc;
text-align: center;
}
}
}
&-task-line {
&--none {
margin-top: 20rpx;
width: 70rpx;
height: 4rpx;
background: #fff;
border-radius: 4rpx;
}
&--action {
margin-top: 20rpx;
width: 70rpx;
height: 4rpx;
background: #8171fc;
border-radius: 4rpx;
}
}
&-left {
display: flex;
margin-right: 30rpx;
flex-direction: column;
position: relative;
}
&-title {
width: 420rpx;
font-size: 28rpx;
font-weight: 400;
color: #333333;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
&-date {
margin-top: 10rpx;
font-size: 24rpx;
font-weight: 400;
color: #999999;
position: absolute;
bottom: 60rpx;
}
&-other {
display: flex;
align-items: center;
position: absolute;
bottom: 0;
}
&-img {
width: 294rpx;
height: 192rpx;
border-radius: 20rpx;
}
&-content {
width: 100%;
padding: 32rpx 0;
border-bottom: 2rpx solid #f1f1f1;
display: flex;
justify-content: space-between;
}
}
.browse {
display: flex;
align-items: center;
margin-top: 30rpx;
margin-right: 50rpx;
&-icon {
width: 32rpx;
height: 32rpx;
}
&-icon2 {
width: 36rpx;
height: 36rpx;
}
&-number {
font-size: 24rpx;
font-weight: bold;
color: #666666;
margin-left: 12rpx;
}
}
.look_more {
font-size: 28rpx;
color: #333333;
text-align: center;
line-height: 90rpx;
}
pages/index/index.vue
浏览文件 @ 4198eee7
<template> <template>
<uni-card> <view>
<text>这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text> <view class="wrapper">
</uni-card> <view style="height: 256rpx" />
<view style="display: flex; justify-content: space-between; align-items: center; padding: 0 30rpx">
<image class="logo" mode="widthFix" src="/static/text_sy_tit@2x.png" />
<view class="address">
<view class="address-text">{{ address }}</view>
<image class="address-icon" mode="widthFix" src="/static/icon/ic_dizhi@2x.png" />
</view>
</view>
<view style="height: 32rpx" />
<view class="banner">
<swiper class="banner-list" indicator-dots>
<swiper-item v-for="(item, index) in bannerList" :key="item.id" class="banner-item">
<image class="banner-img" mode="aspectFill" :src="item.img" />
</swiper-item>
</swiper>
</view>
<!-- 公告 -->
<view style="height: 30rpx" />
<view class="notice">
<swiper display-multiple-items="3" :autoplay="false" :vertical="true" :circular="true" style="height: 100%">
<swiper-item v-for="(item, index) in noticeList" :key="item.id" :catchtouchmove="false">
<view class="notice-box">
<view class="notice-content">{{ item.content }}</view>
<view class="notice-right">
<image mode="aspectFill" class="notice-right-icon" src="/static/icon/ic_jifen_zuo@2x.png" />
<view class="notice-right-number">{{ item.get_points }}</view>
</view>
</view>
</swiper-item>
</swiper>
</view>
<view style="background-color: #f6f6f6; width: 100%; height: 20rpx" />
<view class="article">
<view class="article-list">
<view class="article-item" v-for="(item, index) in articleTypeList" :key="item.id" @click="onArticleTypeClick(item, index)">
<view :class="[articleTypeAction === index ? 'article-item-name--action' : 'article-item-name--none']">{{ item.name }}</view>
<view :class="[articleTypeAction === index ? 'article-task-line--action' : 'article-task-line--none']" />
</view>
</view>
<view v-for="(item, index) in articleList" :key="item.id">
<view v-if="index < 3" class="article-content">
<view class="article-left">
<view class="article-title">{{ item.title }}</view>
<view class="article-date">{{ item.created }}</view>
<view class="article-other">
<view class="browse">
<image class="browse-icon" mode="aspectFill" src="/static/icon/ic_wz_kanguo@2x.png" />
<view class="browse-number">{{ item.views_num }}</view>
</view>
<view class="browse" catchtap="fabulous">
<image v-if="!item.like_status" class="browse-icon" mode="aspectFill" src="/static/icon/ic_wz_dianzan1@2x.png" />
<image v-else class="browse-icon-2" mode="aspectFill" src="/static/icon/ic_wz_dianzan2@2x.png" />
<view class="browse-number">{{ item.likes_num }}</view>
</view>
<view class="browse" catchtap="follow">
<image v-if="!item.follow_status" class="browse-icon" mode="aspectFill" src="/static/icon/ic_wz_guanzhu1@2x.png" />
<image v-else class="browse-icon-2" mode="aspectFill" src="/static/icon/ic_wz_guanzhu2@2x.png" />
</view>
</view>
</view>
<image class="article-img" mode="aspectFill" :src="item.img" />
<!-- <navigator hover-class="none" class="article_container" url="/package-one/article-detail/article-detail?id={{item.id}}"> </navigator>-->
</view>
</view>
<view class="look_more" bindtap="articleMore">查看更多</view>
</view>
<view style="background-color: #f6f6f6; width: 100%; height: 20rpx" />
</view>
</view>
</template> </template>
<script> <script>
import { articleList, articleTypeList, bannerList, noticeList } from '@/pages/index/mock';
export default { export default {
data() { data() {
return {}; return {
address: '获取位置',
bannerList,
noticeList,
articleTypeList,
articleTypeAction: 0,
articleList,
};
}, },
onLoad(query) {}, onLoad(query) {},
methods: {}, methods: {
selectAddress() {
console.log('获取位置');
},
onArticleTypeClick(item, index) {
if (this.articleTypeAction === index) return;
this.articleTypeAction = index;
},
},
}; };
</script> </script>
<style lang="scss"></style> <style lang="scss">
@import 'index.scss';
</style>
pages/index/mock.js 0 → 100644
浏览文件 @ 4198eee7
This source diff could not be displayed because it is too large. You can view the blob instead.
pages/mine/index.vue 0 → 100644
浏览文件 @ 4198eee7
<template>
<view> 我的 </view>
</template>
<script>
export default {
data() {
return {};
},
methods: {},
};
</script>
<style scoped></style>
pages/record/index.vue 0 → 100644
浏览文件 @ 4198eee7
<template>
<view> 随手拍 </view>
</template>
<script>
export default {
data() {
return {};
},
methods: {},
};
</script>
<style scoped></style>
static/text_sy_tit@2x.png
查看替换文件 @ c6f1d43d 浏览文件 @ 4198eee7
static/text_sy_tit@2x.png

3.3 KB | W: | H:

static/text_sy_tit@2x.png

8.6 KB | W: | H:

static/text_sy_tit@2x.png
static/text_sy_tit@2x.png
static/text_sy_tit@2x.png
static/text_sy_tit@2x.png
  • 2-up
  • Swipe
  • Onion skin
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论