Skip to content

肖康 / H5_2.0

Go to a project
Commit b1243184 by LJM
Options

css

parent 2bc7ce15
Expand all
Inline Side-by-side
Showing with 105 additions and 97 deletions
App.vue
...@@ -22,5 +22,23 @@ uni-page-head { ...@@ -22,5 +22,23 @@ uni-page-head {
body { body {
background: #f5f5f5; background: #f5f5f5;
} }
::v-deep uni-modal .uni-modal {
border-radius: 10rpx;
}
::v-deep uni-modal .uni-modal__hd {
color: #323233;
}
::v-deep uni-modal .uni-modal__btn_default {
color: #323233 !important;
}
::v-deep uni-modal .uni-modal__btn_primary {
color: #1969f9 !important;
}
::v-deep uni-modal .uni-modal__btn:after {
border-left: 1px solid #ebedf0;
}
::v-deep uni-modal .uni-modal__ft:after {
border-top: 1px solid #ebedf0;
}
/* #endif */ /* #endif */
</style> </style>
assets/css/mine/news.scss
...@@ -198,11 +198,14 @@ ...@@ -198,11 +198,14 @@
} }
.ad { .ad {
padding: 28rpx 24rpx 30rpx 24rpx; padding: 28rpx 24rpx 30rpx 24rpx;
.box {
margin-bottom: 24rpx;
image { image {
width: 100%; width: 100%;
height: 302px; height: 302px;
} }
} }
}
} }
.no-data { .no-data {
......
pages.json
...@@ -229,7 +229,7 @@ ...@@ -229,7 +229,7 @@
} }
], ],
"globalStyle": { "globalStyle": {
"maxWidth": 750
}, },
"uniIdRouter": {} "uniIdRouter": {}
} }
\ No newline at end of file
pages/mine/article.vue
...@@ -20,17 +20,19 @@ ...@@ -20,17 +20,19 @@
</view> </view>
<view class="content" v-html="detail.content"></view> <view class="content" v-html="detail.content"></view>
</view> </view>
<view class="hot-article"> <view class="hot-article" v-if="detail.hot_article_list && detail.hot_article_list.length > 0">
<view class="title row verCenter"> <view class="title row verCenter">
<text class="t1">热门文章</text> <text class="t1">热门文章</text>
<text class="iconfont icon-a-juxing1"></text> <text class="iconfont icon-a-juxing1"></text>
</view> </view>
<view class="list" v-if="detail.hot_article_list && detail.hot_article_list.length > 0"> <view class="list">
<view class="box" v-for="(item, index) in detail.hot_article_list" :key="index">{{ index + 1 }}. {{ item.title }}</view> <view class="box" v-for="(item, index) in detail.hot_article_list" :key="index">{{ index + 1 }}. {{ item.title }}</view>
</view> </view>
</view> </view>
<view class="ad" v-if="detail.h5_news_detail_ad && detail.h5_news_detail_ad.length > 0"><image v-for="(item, index) in detail.h5_news_detail_ad" :key="index" :src="item.images"></image></view> <view class="ad" v-if="detail.h5_news_detail_ad && detail.h5_news_detail_ad.length > 0">
<uni-popup ref="share" type="share" safeArea backgroundColor="#fff"><uni-popup-share></uni-popup-share></uni-popup> <a class="box" :href="item.url" v-for="(item, index) in detail.h5_news_detail_ad" :key="index"><image mode="aspectFill" :src="item.images" lazy-load="true"></image></a>
</view>
<uni-popup ref="share" type="share" safeArea backgroundColor="#fff"><uni-popup-share @select="selectChange"></uni-popup-share></uni-popup>
</view> </view>
</template> </template>
...@@ -58,19 +60,6 @@ export default { ...@@ -58,19 +60,6 @@ export default {
onShow() { onShow() {
this.getData(); this.getData();
}, },
filters: {
formatDate(value) {
// 过滤器函数
const date = new Date(value * 1000);
const year = date.getFullYear();
const month = ('0' + (date.getMonth() + 1)).slice(-2);
const day = ('0' + date.getDate()).slice(-2);
const hour = ('0' + date.getHours()).slice(-2);
const minute = ('0' + date.getMinutes()).slice(-2);
const second = ('0' + date.getSeconds()).slice(-2);
return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
}
},
methods: { methods: {
handleChangeTitle(e) { handleChangeTitle(e) {
uni.navigateTo({ uni.navigateTo({
...@@ -80,6 +69,9 @@ export default { ...@@ -80,6 +69,9 @@ export default {
open() { open() {
this.$refs.share.open('bottom'); this.$refs.share.open('bottom');
}, },
selectChange(e) {
console.log(e);
},
toUrl(id, type, name) { toUrl(id, type, name) {
if (type == 1) { if (type == 1) {
uni.navigateTo({ uni.navigateTo({
......
uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue
<template> <template>
<view class="uni-popup-share"> <view class="uni-popup-share">
<view class="uni-share-title"><text class="uni-share-title-text">{{shareTitleText}}</text></view> <view class="uni-share-title">
<text class="uni-share-title-text">{{ shareTitleText }}</text>
</view>
<view class="uni-share-content"> <view class="uni-share-content">
<view class="uni-share-content-box"> <view class="uni-share-content-box">
<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)"> <view class="uni-share-content-item" v-for="(item, index) in bottomData" :key="index" @click.stop="select(item, index)">
<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image> <image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
<text class="uni-share-text">{{item.text}}</text> <text class="uni-share-text">{{ item.text }}</text>
</view> </view>
</view> </view>
</view> </view>
<view class="uni-share-button-box"> <view class="uni-share-button-box">
<button class="uni-share-button" @click="close">{{cancelText}}</button> <view class="uni-share-button" @click="close">{{ cancelText }}</view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import popup from '../uni-popup/popup.js' import popup from '../uni-popup/popup.js';
import { import { initVueI18n } from '@dcloudio/uni-i18n';
initVueI18n import messages from '../uni-popup/i18n/index.js';
} from '@dcloudio/uni-i18n' const { t } = initVueI18n(messages);
import messages from '../uni-popup/i18n/index.js' export default {
const { t } = initVueI18n(messages)
export default {
name: 'UniPopupShare', name: 'UniPopupShare',
mixins:[popup], mixins: [popup],
emits:['select'], emits: ['select'],
props: { props: {
title: { title: {
type: String, type: String,
...@@ -39,46 +38,37 @@ ...@@ -39,46 +38,37 @@
}, },
data() { data() {
return { return {
bottomData: [{ bottomData: [
{
text: '微信', text: '微信',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png', icon: 'https://img.ichunt.com/images/ichunt/202305/27/5bbbd6fb77046c311d544937f89284d9.png',
name: 'wx' name: 'wx'
}, },
{ {
text: '支付宝', text: '朋友圈',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png', icon: 'https://img.ichunt.com/images/ichunt/202305/27/a92b05438b5c89daff38c729cb63faba.png',
name: 'wx' name: 'wx'
}, },
{ {
text: 'QQ', text: '复制链接',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/e7a79520-50be-11eb-b997-9918a5dda011.png', icon: 'https://img.ichunt.com/images/ichunt/202305/27/726bff17f48ad6866f9e6956c19cb1a8.png',
name: 'qq' name: 'link'
}, },
{ {
text: '新浪', text: '二维码',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.png', icon: 'https://img.ichunt.com/images/ichunt/202305/27/8478b5b31e6bc6f84676369ff18a9556.png',
name: 'sina' name: 'code'
},
// {
// text: '百度',
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png',
// name: 'copy'
// },
// {
// text: '其他',
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png',
// name: 'more'
// }
]
} }
]
};
}, },
created() {}, created() {},
computed: { computed: {
cancelText() { cancelText() {
return t("uni-popup.cancel") return t('uni-popup.cancel');
}, },
shareTitleText() { shareTitleText() {
return this.title || t("uni-popup.shareTitle") return this.title || t('uni-popup.shareTitle');
} }
}, },
methods: { methods: {
...@@ -89,27 +79,26 @@ ...@@ -89,27 +79,26 @@
this.$emit('select', { this.$emit('select', {
item, item,
index index
}) });
this.close() this.close();
}, },
/** /**
* 关闭窗口 * 关闭窗口
*/ */
close() { close() {
if(this.beforeClose) return if (this.beforeClose) return;
this.popup.close() this.popup.close();
}
} }
} }
};
</script> </script>
<style lang="scss" > <style lang="scss">
.uni-popup-share { .uni-popup-share {
background-color: #fff; background-color: #fff;
border-top-left-radius: 11px; border-top-left-radius: 10rpx;
border-top-right-radius: 11px; border-top-right-radius: 10rpx;
} }
.uni-share-title { .uni-share-title {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
...@@ -117,30 +106,31 @@ ...@@ -117,30 +106,31 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 40px; height: 40px;
} }
.uni-share-title-text { .uni-share-title-text {
font-size: 14px; font-size: 28rpx;
color: #666; color: #292b33;
} font-weight: 600;
.uni-share-content { }
.uni-share-content {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
padding-top: 10px; padding-top: 10px;
} }
.uni-share-content-box { .uni-share-content-box {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
width: 360px; width: 360px;
} }
.uni-share-content-item { .uni-share-content-item {
width: 90px; width: 90px;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
...@@ -149,39 +139,41 @@ ...@@ -149,39 +139,41 @@
justify-content: center; justify-content: center;
padding: 10px 0; padding: 10px 0;
align-items: center; align-items: center;
} }
.uni-share-content-item:active { .uni-share-content-item:active {
background-color: #f5f5f5; background-color: #f5f5f5;
} }
.uni-share-image { .uni-share-image {
width: 30px; width: 96rpx;
height: 30px; height: 96rpx;
} }
.uni-share-text { .uni-share-text {
margin-top: 10px; margin-top: 10px;
font-size: 14px; font-size: 14px;
color: #3B4144; color: #3b4144;
} }
.uni-share-button-box { .uni-share-button-box {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
flex-direction: row; flex-direction: row;
padding: 10px 15px; padding: 10px 15px;
} border-top: 16rpx solid #f7f8fa;
}
.uni-share-button { .uni-share-button {
flex: 1; flex: 1;
border-radius: 50px; border-radius: 50px;
color: #666; color: #484b59;
font-size: 16px; font-size: 16px;
} text-align: center;
}
.uni-share-button::after { .uni-share-button::after {
border-radius: 50px; border-radius: 50px;
} }
</style> </style>
uni_modules/uni-popup/components/uni-popup/i18n/zh-Hans.json
...@@ -3,5 +3,5 @@ ...@@ -3,5 +3,5 @@
"uni-popup.ok": "确定", "uni-popup.ok": "确定",
"uni-popup.placeholder": "请输入", "uni-popup.placeholder": "请输入",
"uni-popup.title": "提示", "uni-popup.title": "提示",
"uni-popup.shareTitle": "分享到" "uni-popup.shareTitle": "立即分享给好友"
} }
\ No newline at end of file
uni_modules/uni-popup/components/uni-popup/i18n/zh-Hant.json
...@@ -3,5 +3,5 @@ ...@@ -3,5 +3,5 @@
"uni-popup.ok": "確定", "uni-popup.ok": "確定",
"uni-popup.placeholder": "請輸入", "uni-popup.placeholder": "請輸入",
"uni-popup.title": "提示", "uni-popup.title": "提示",
"uni-popup.shareTitle": "分享到" "uni-popup.shareTitle": "立即分享给好友"
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment