|
@@ -14,9 +14,9 @@
|
|
|
<div class="kefu">
|
|
|
<img src="@/assets/kefu.jpg" alt="客服" />
|
|
|
</div>
|
|
|
- <div class="row">
|
|
|
- <button class="btn" @click="toAppDownload">
|
|
|
- <img src="@/assets/3.png" alt="APP下载" class="btn-icon" />
|
|
|
+ <div class="row" >
|
|
|
+ <button class="btn" @click="toAppDownload" style="padding:0 6px;">
|
|
|
+ <img src="@/assets/3.png" alt="APP下载" class="btn-icon" style="width: 22px; height: 22px;" />
|
|
|
<span>APP下载</span>
|
|
|
</button>
|
|
|
<button class="btn" @click="toCultureDetail">
|
|
@@ -29,13 +29,13 @@
|
|
|
<van-swipe
|
|
|
:autoplay="3000"
|
|
|
indicator-color="#ed4b39"
|
|
|
- style="width: 100%; height: 100px; border-radius: 8px; overflow: hidden;"
|
|
|
+ style="width: 100%; height: 200px; border-radius: 8px; overflow: hidden;"
|
|
|
>
|
|
|
<van-swipe-item v-for="(banner, index) in banners" :key="index">
|
|
|
<img
|
|
|
:src="banner"
|
|
|
alt="轮播图"
|
|
|
- style="width: 100%; height: 100px; object-fit: cover;"
|
|
|
+ style="width: 100%; height: 200px; object-fit: cover;"
|
|
|
/>
|
|
|
</van-swipe-item>
|
|
|
</van-swipe>
|
|
@@ -67,10 +67,16 @@
|
|
|
<div class="news-list">
|
|
|
<div
|
|
|
class="news_content"
|
|
|
- v-for="(news, index) in newsList"
|
|
|
+ v-for="(news, index) in processedNewsList"
|
|
|
:key="index"
|
|
|
- v-html="news.content"
|
|
|
- ></div>
|
|
|
+ >
|
|
|
+ <template v-if="news.type === 'iframe'">
|
|
|
+ <iframe :src="news.url" frameborder="0" class="news-iframe"></iframe>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div v-html="news.content" @click="handleNewsClick($event)"></div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<van-dialog
|
|
|
v-model="showAuthDialog"
|
|
@@ -138,6 +144,28 @@ export default {
|
|
|
this.getUserInfo();
|
|
|
this.getNewsDetail()
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ processedNewsList() {
|
|
|
+ return this.newsList.map(news => {
|
|
|
+ // 尝试从content中提取URL
|
|
|
+ const urlMatch = news.content.match(/https?:\/\/[^\s<>"']+/g);
|
|
|
+
|
|
|
+ if (urlMatch && (urlMatch[0].includes('.html') || urlMatch[0].includes('.com'))) {
|
|
|
+ // 如果找到URL并且是HTML页面或.com网站,使用iframe展示
|
|
|
+ return {
|
|
|
+ type: 'iframe',
|
|
|
+ url: urlMatch[0]
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ // 否则保持原有的content展示方式
|
|
|
+ return {
|
|
|
+ type: 'content',
|
|
|
+ content: news.content
|
|
|
+ };
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
methods: {
|
|
|
async getUserInfo() {
|
|
|
const res = await getUserInfo();
|
|
@@ -152,9 +180,9 @@ export default {
|
|
|
const res = await getBanners(formData);
|
|
|
this.banners = res.data
|
|
|
},
|
|
|
- async getNewsDetail() {
|
|
|
- const res = await getNews()
|
|
|
- this.newsList = res.data
|
|
|
+ async getNewsDetail() {
|
|
|
+ const res = await getNews();
|
|
|
+ this.newsList = res.data;
|
|
|
},
|
|
|
toOfficialGroup() {
|
|
|
window.open(this.userInfo.link[2].value, '_blank');
|
|
@@ -174,6 +202,15 @@ export default {
|
|
|
toAuth() {
|
|
|
this.$router.push('/user-center');
|
|
|
this.showAuthDialog = false;
|
|
|
+ },
|
|
|
+ handleNewsClick(event) {
|
|
|
+ const link = event.target.closest('a');
|
|
|
+ if (link) {
|
|
|
+ event.preventDefault();
|
|
|
+ if (link.href) {
|
|
|
+ window.open(link.href, '_blank');
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
};
|
|
@@ -212,10 +249,12 @@ export default {
|
|
|
background: #fff;
|
|
|
border: 2px solid #fff;
|
|
|
width: 24%;
|
|
|
+ border-radius: 50%;
|
|
|
img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
object-fit: cover;
|
|
|
+ border-radius: 50%;
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -258,7 +297,7 @@ export default {
|
|
|
width: 100%;
|
|
|
max-width: 500px;
|
|
|
margin: 0 auto 16px auto;
|
|
|
- height: 100px;
|
|
|
+ height: 200px;
|
|
|
background: #fff;
|
|
|
border-radius: 8px;
|
|
|
display: flex;
|
|
@@ -362,6 +401,13 @@ export default {
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
+ .news-iframe {
|
|
|
+ width: 100%;
|
|
|
+ height: 500px;
|
|
|
+ border: none;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
:deep(p) {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
@@ -399,6 +445,16 @@ export default {
|
|
|
max-width: 100%;
|
|
|
word-break: break-word;
|
|
|
}
|
|
|
+
|
|
|
+ :deep(a) {
|
|
|
+ color: #1890ff;
|
|
|
+ text-decoration: none;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.close-icon-wrapper {
|