Compare commits
9 Commits
5d93a81ec6
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 017f5255ef | |||
| 5e74fa2196 | |||
| e912175871 | |||
| 281d0015aa | |||
| bdca181855 | |||
| 168748eb18 | |||
| 3f5f76946d | |||
| b9719c22cd | |||
| a5d1de0e23 |
2
.gitignore
vendored
2
.gitignore
vendored
@ -2,6 +2,7 @@
|
|||||||
node_modules
|
node_modules
|
||||||
/dist
|
/dist
|
||||||
/situation
|
/situation
|
||||||
|
/protal_dist
|
||||||
|
|
||||||
# local env files
|
# local env files
|
||||||
.env.local
|
.env.local
|
||||||
@ -21,3 +22,4 @@ package-lock.json
|
|||||||
*.njsproj
|
*.njsproj
|
||||||
*.sln
|
*.sln
|
||||||
*.sw?
|
*.sw?
|
||||||
|
*.zip
|
||||||
@ -1,9 +1,3 @@
|
|||||||
window.GD_KEYS = [
|
|
||||||
'348d477ba83826e46b32d3ff10fffe82',
|
|
||||||
'ed2ea36f8564541569c370254845d93d',
|
|
||||||
'c1da03827f956a215311c0f5229bddc3',
|
|
||||||
]
|
|
||||||
|
|
||||||
window.config = {
|
window.config = {
|
||||||
baseUrl: 'http://192.168.3.10:9121/',
|
baseUrl: 'http://192.168.3.10:9121/',
|
||||||
}
|
}
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 529 KiB After Width: | Height: | Size: 356 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 195 KiB After Width: | Height: | Size: 884 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -26,3 +26,21 @@ export function getNewsDetail(params) {
|
|||||||
params,
|
params,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 保存新闻
|
||||||
|
export function updateNews(data) {
|
||||||
|
return request({
|
||||||
|
url: '/news/B8fpNxunbxj37x3VRcVz',
|
||||||
|
method: 'post',
|
||||||
|
data,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取新闻列表
|
||||||
|
export function saveDetail(data) {
|
||||||
|
return request({
|
||||||
|
url: '/news/VbxWW8EdJQGyWzJyvSrN',
|
||||||
|
method: 'post',
|
||||||
|
data,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|||||||
@ -31,6 +31,7 @@ let autoPlayTimer = null
|
|||||||
const itemWidth = computed(() => $fontSize(props.sourceWidth))
|
const itemWidth = computed(() => $fontSize(props.sourceWidth))
|
||||||
const itemHeight = computed(() => $fontSize(props.sourceHeight))
|
const itemHeight = computed(() => $fontSize(props.sourceHeight))
|
||||||
const itemGap = computed(() => $fontSize(props.sourceGap))
|
const itemGap = computed(() => $fontSize(props.sourceGap))
|
||||||
|
|
||||||
const itemTotalWidth = computed(() => itemWidth.value + itemGap.value)
|
const itemTotalWidth = computed(() => itemWidth.value + itemGap.value)
|
||||||
const viewPortWidth = computed(() => props.pageSize * itemWidth.value + (props.pageSize - 1) * itemGap.value + 'px')
|
const viewPortWidth = computed(() => props.pageSize * itemWidth.value + (props.pageSize - 1) * itemGap.value + 'px')
|
||||||
const trackWidth = computed(() => props.data.length * itemTotalWidth.value - itemGap.value + 'px')
|
const trackWidth = computed(() => props.data.length * itemTotalWidth.value - itemGap.value + 'px')
|
||||||
|
|||||||
@ -11,16 +11,12 @@ function setRem() {
|
|||||||
// 当前页面宽度相对于设计稿宽度的缩放比例
|
// 当前页面宽度相对于设计稿宽度的缩放比例
|
||||||
const scale = document.documentElement.clientWidth / designWidth
|
const scale = document.documentElement.clientWidth / designWidth
|
||||||
// 设置页面根节点字体大小(最高放大比例为maxScale)
|
// 设置页面根节点字体大小(最高放大比例为maxScale)
|
||||||
document.documentElement.style.fontSize =
|
document.documentElement.style.fontSize = baseSize * Math.min(scale, maxScale) + 'px'
|
||||||
baseSize * Math.min(scale, maxScale) + 'px'
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 根据设计稿尺寸计算实际尺寸
|
// 根据设计稿尺寸计算实际尺寸
|
||||||
export function fontSize(res) {
|
export function fontSize(res) {
|
||||||
const clientWidth =
|
const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
|
||||||
window.innerWidth ||
|
|
||||||
document.documentElement.clientWidth ||
|
|
||||||
document.body.clientWidth
|
|
||||||
if (!clientWidth) return res
|
if (!clientWidth) return res
|
||||||
const scale = clientWidth / designWidth
|
const scale = clientWidth / designWidth
|
||||||
return res * Math.min(scale, maxScale)
|
return res * Math.min(scale, maxScale)
|
||||||
|
|||||||
@ -29,37 +29,19 @@ const imgList = [
|
|||||||
id: 2,
|
id: 2,
|
||||||
width: 210,
|
width: 210,
|
||||||
height: 300,
|
height: 300,
|
||||||
list: [
|
list: ['main/5.png', 'main/6.png', 'main/7.png', 'main/8.png', 'main/9.png'],
|
||||||
'main/5.png',
|
|
||||||
'main/6.png',
|
|
||||||
'main/7.png',
|
|
||||||
'main/8.png',
|
|
||||||
'main/9.png',
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
width: 210,
|
width: 210,
|
||||||
height: 300,
|
height: 300,
|
||||||
list: [
|
list: ['main/10.png', 'main/11.png', 'main/12.png', 'main/13.png', 'main/14.png'],
|
||||||
'main/10.png',
|
|
||||||
'main/11.png',
|
|
||||||
'main/12.png',
|
|
||||||
'main/13.png',
|
|
||||||
'main/14.png',
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 4,
|
id: 4,
|
||||||
width: 210,
|
width: 210,
|
||||||
height: 300,
|
height: 300,
|
||||||
list: [
|
list: ['main/15.png', 'main/16.png', 'main/17.png', 'main/18.png', 'main/19.png'],
|
||||||
'main/15.png',
|
|
||||||
'main/16.png',
|
|
||||||
'main/17.png',
|
|
||||||
'main/18.png',
|
|
||||||
'main/19.png',
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 5,
|
id: 5,
|
||||||
@ -135,9 +117,13 @@ onMounted(() => {})
|
|||||||
.my-card {
|
.my-card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
img {
|
||||||
|
width: 40%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
.label {
|
.label {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
width: 532px;
|
width: 40%;
|
||||||
padding-right: 25px;
|
padding-right: 25px;
|
||||||
font-family: 'PingFang SC';
|
font-family: 'PingFang SC';
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|||||||
@ -1,6 +1,12 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import {ref, onMounted} from 'vue'
|
import {ref, onMounted} from 'vue'
|
||||||
|
|
||||||
|
window.GD_KEYS = [
|
||||||
|
'348d477ba83826e46b32d3ff10fffe82',
|
||||||
|
'ed2ea36f8564541569c370254845d93d',
|
||||||
|
'c1da03827f956a215311c0f5229bddc3',
|
||||||
|
]
|
||||||
|
|
||||||
const map = ref(null)
|
const map = ref(null)
|
||||||
|
|
||||||
const center = [118.762616, 32.068811]
|
const center = [118.762616, 32.068811]
|
||||||
|
|||||||
@ -3,8 +3,9 @@ import axios from 'axios';
|
|||||||
import { ref, reactive, onMounted } from 'vue';
|
import { ref, reactive, onMounted } from 'vue';
|
||||||
import { QuillEditor } from '@vueup/vue-quill'
|
import { QuillEditor } from '@vueup/vue-quill'
|
||||||
import '@vueup/vue-quill/dist/vue-quill.snow.css'
|
import '@vueup/vue-quill/dist/vue-quill.snow.css'
|
||||||
|
import {getNews,getNewsDetail,updateNews,saveDetail} from '@/api/index'
|
||||||
|
|
||||||
const API_BASE = window.config?.baseUrl
|
const baseURL = window.config?.baseUrl
|
||||||
|
|
||||||
// 新闻列表
|
// 新闻列表
|
||||||
const newsList = ref([]);
|
const newsList = ref([]);
|
||||||
@ -45,14 +46,20 @@ const editorOption= {
|
|||||||
modules:{
|
modules:{
|
||||||
toolbar: {
|
toolbar: {
|
||||||
container: [
|
container: [
|
||||||
['bold', 'italic', 'underline', 'strike'],
|
['bold', 'italic', 'underline', 'strike'], //加粗,斜体,下划线,删除线
|
||||||
[{ header: 1 }, { header: 2 }],
|
['blockquote', 'code-block'], //引用,代码块
|
||||||
[{ list: 'ordered' }, { list: 'bullet' }],
|
[{'header': 1}, {'header': 2}], // 标题,键值对的形式;1、2表示字体大小
|
||||||
[{ indent: '-1' }, { indent: '+1' }],
|
[{'list': 'ordered'}, {'list': 'bullet'}], //列表
|
||||||
[{ color: [] }, { background: [] }],
|
[{'script': 'sub'}, {'script': 'super'}], // 上下标
|
||||||
[{ align: [] }],
|
[{'indent': '-1'}, {'indent': '+1'}], // 缩进
|
||||||
['link', 'image'],
|
[{'direction': 'rtl'}], // 文本方向
|
||||||
['clean'],
|
[{'size': ['small', false, 'large', 'huge']}], // 字体大小
|
||||||
|
[{'header': [1, 2, 3, 4, 5, 6, false]}], //几级标题
|
||||||
|
[{'color': []}, {'background': []}], // 字体颜色,字体背景颜色
|
||||||
|
[{'font': []}], //字体
|
||||||
|
[{'align': []}], //对齐方式
|
||||||
|
['clean'], //清除字体样式
|
||||||
|
['image', 'video'] //上传图片、上传视频
|
||||||
],
|
],
|
||||||
handlers: {
|
handlers: {
|
||||||
image: imageHandler,
|
image: imageHandler,
|
||||||
@ -127,16 +134,15 @@ function imageHandler() {
|
|||||||
// ----------------- 获取新闻 -----------------
|
// ----------------- 获取新闻 -----------------
|
||||||
const fetchNews = async () => {
|
const fetchNews = async () => {
|
||||||
try {
|
try {
|
||||||
const res = await axios.get(`${API_BASE}/news/`, {
|
let query = {
|
||||||
params: {
|
status: statusFilter.value || undefined,
|
||||||
page: page.value,
|
page: page.value,
|
||||||
page_size: pageSize.value,
|
page_size: pageSize.value,
|
||||||
status: statusFilter.value || undefined,
|
}
|
||||||
},
|
let {code, data, pagination} = await getNews(query)
|
||||||
});
|
if (code === 0) {
|
||||||
if (res.data.code === 0) {
|
newsList.value = data;
|
||||||
newsList.value = res.data.data;
|
totalPages.value = pagination.total_pages;
|
||||||
totalPages.value = res.data.pagination.total_pages;
|
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error("获取新闻失败", err);
|
console.error("获取新闻失败", err);
|
||||||
@ -146,10 +152,11 @@ const fetchNews = async () => {
|
|||||||
// ----------------- 添加/编辑 -----------------
|
// ----------------- 添加/编辑 -----------------
|
||||||
const saveNews = async () => {
|
const saveNews = async () => {
|
||||||
try {
|
try {
|
||||||
|
editingNews.content = quillInstance.value.root.innerHTML
|
||||||
if (isEditing.value) {
|
if (isEditing.value) {
|
||||||
await axios.post(`${API_BASE}/news/B8fpNxunbxj37x3VRcVz`, editingNews);
|
await updateNews(editingNews);
|
||||||
} else {
|
} else {
|
||||||
await axios.post(`${API_BASE}/news/VbxWW8EdJQGyWzJyvSrN`, editingNews);
|
await saveDetail(editingNews);
|
||||||
}
|
}
|
||||||
showForm.value = false;
|
showForm.value = false;
|
||||||
fetchNews();
|
fetchNews();
|
||||||
@ -161,16 +168,15 @@ const saveNews = async () => {
|
|||||||
const editNews = async (news) => {
|
const editNews = async (news) => {
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
try {
|
try {
|
||||||
const res = await axios.get(`${API_BASE}/news/details`, {
|
let query = {
|
||||||
params: { slug: news.slug }
|
slug: news.slug,
|
||||||
});
|
}
|
||||||
|
let {code, data} = await getNewsDetail(query)
|
||||||
console.log(res.data)
|
if (code === 0) {
|
||||||
if (res.data.code === 0) {
|
Object.assign(editingNews, data);
|
||||||
console.log(res.data.data)
|
|
||||||
Object.assign(editingNews, res.data.data);
|
|
||||||
isEditing.value = true;
|
isEditing.value = true;
|
||||||
showForm.value = true;
|
showForm.value = true;
|
||||||
|
quillInstance.value.clipboard.dangerouslyPasteHTML(editingNews.content)
|
||||||
}
|
}
|
||||||
} finally {
|
} finally {
|
||||||
loading.value = false;
|
loading.value = false;
|
||||||
@ -185,6 +191,7 @@ const addNews = () => {
|
|||||||
content: "",
|
content: "",
|
||||||
status: "draft",
|
status: "draft",
|
||||||
slug: "",
|
slug: "",
|
||||||
|
datetime: null,
|
||||||
});
|
});
|
||||||
isEditing.value = false;
|
isEditing.value = false;
|
||||||
showForm.value = true;
|
showForm.value = true;
|
||||||
@ -222,7 +229,7 @@ function uploadImage(file) {
|
|||||||
const formData = new FormData();
|
const formData = new FormData();
|
||||||
formData.append('file', file);
|
formData.append('file', file);
|
||||||
|
|
||||||
fetch(`${API_BASE}/update/img`, {
|
fetch(`${baseURL}update/img`, {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
body: formData,
|
body: formData,
|
||||||
})
|
})
|
||||||
@ -230,7 +237,7 @@ function uploadImage(file) {
|
|||||||
.then((data) => {
|
.then((data) => {
|
||||||
if (data.code === 0) {
|
if (data.code === 0) {
|
||||||
console.log(data)
|
console.log(data)
|
||||||
resolve(`${API_BASE}/download/img/${data.data}`);
|
resolve(`${baseURL}download/img/${data.data}`);
|
||||||
} else {
|
} else {
|
||||||
reject(data.msg);
|
reject(data.msg);
|
||||||
}
|
}
|
||||||
@ -243,6 +250,7 @@ function uploadImage(file) {
|
|||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
fetchNews();
|
fetchNews();
|
||||||
|
addNews();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -303,7 +311,7 @@ onMounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
<label>内容简介: <textarea class="snapshot" v-model="editingNews.snapshot"></textarea></label><br />
|
<label>内容简介: <textarea class="snapshot" v-model="editingNews.snapshot"></textarea></label><br />
|
||||||
<label>内容:</label>
|
<label>内容:</label>
|
||||||
<quill-editor v-model:content="editingNews.content" content-type="delta"
|
<quill-editor content-type="html"
|
||||||
theme="snow" style="height: 300px" :options="editorOption" @ready="onEditorReady"/>
|
theme="snow" style="height: 300px" :options="editorOption" @ready="onEditorReady"/>
|
||||||
<label>状态:
|
<label>状态:
|
||||||
<select v-model="editingNews.status">
|
<select v-model="editingNews.status">
|
||||||
|
|||||||
@ -8,21 +8,29 @@ import {ElMessage} from 'element-plus'
|
|||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const detail = route.query
|
const detail = route.query
|
||||||
const showLoad = ref(true)
|
const showLoad = ref(true)
|
||||||
|
|
||||||
const newsTitle = ref('')
|
const newsTitle = ref('')
|
||||||
|
const newsTime = ref('')
|
||||||
const newsSubTitle = ref('')
|
const newsSubTitle = ref('')
|
||||||
const newsCoverImg = ref('')
|
const newsCoverImg = ref('')
|
||||||
const newsContent = ref('')
|
const newsContent = ref(null)
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getDetail()
|
||||||
|
})
|
||||||
|
|
||||||
const getDetail = () => {
|
const getDetail = () => {
|
||||||
showLoad.value = true
|
|
||||||
let query = {
|
let query = {
|
||||||
slug: detail.slug,
|
slug: detail.slug,
|
||||||
}
|
}
|
||||||
getNewsDetail(query)
|
getNewsDetail(query)
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
if (res.code === 0) {
|
if (res.code === 0) {
|
||||||
let {content, cover_image, snapshot, title} = res.data
|
let {content, cover_image, snapshot, datetime, title} = res.data
|
||||||
newsTitle.value = title
|
newsTitle.value = title
|
||||||
|
newsTime.value = datetime
|
||||||
newsSubTitle.value = snapshot
|
newsSubTitle.value = snapshot
|
||||||
newsCoverImg.value = cover_image
|
newsCoverImg.value = cover_image
|
||||||
newsContent.value = content
|
newsContent.value = content
|
||||||
@ -37,11 +45,6 @@ const getDetail = () => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const router = useRouter()
|
|
||||||
onMounted(() => {
|
|
||||||
getDetail()
|
|
||||||
})
|
|
||||||
|
|
||||||
const toBack = () => {
|
const toBack = () => {
|
||||||
router.back()
|
router.back()
|
||||||
}
|
}
|
||||||
@ -53,63 +56,52 @@ const toBack = () => {
|
|||||||
<h3 class="label">
|
<h3 class="label">
|
||||||
{{ newsTitle }}
|
{{ newsTitle }}
|
||||||
</h3>
|
</h3>
|
||||||
<h3 class="time" v-if="newsSubTitle">
|
<h3 class="time" v-if="newsTime">
|
||||||
{{ newsSubTitle }}
|
{{ newsTime }}
|
||||||
</h3>
|
</h3>
|
||||||
<div class="img" v-if="newsCoverImg">
|
<div class="artical">
|
||||||
<img :src="newsCoverImg" alt="" />
|
<div v-html="newsContent"></div>
|
||||||
</div>
|
|
||||||
<div class="artical" v-if="newsContent">
|
|
||||||
{{ newsContent }}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else>暂无内容</div>
|
<div v-else class="no-content">暂无内容</div>
|
||||||
<div class="back" @click="toBack">返回</div>
|
<div class="back" @click="toBack">返回</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.label {
|
.page {
|
||||||
margin: 64px 0 20px 0;
|
.label {
|
||||||
font-family: 'PingFang SC';
|
text-align: center;
|
||||||
font-weight: 500;
|
margin: 64px 0 20px 0;
|
||||||
font-size: 28px;
|
font-family: 'PingFang SC';
|
||||||
color: $black;
|
font-weight: 500;
|
||||||
}
|
font-size: 28px;
|
||||||
.time {
|
color: $black;
|
||||||
font-family: 'PingFang SC';
|
}
|
||||||
font-weight: 500;
|
.time {
|
||||||
font-size: 18px;
|
text-align: center;
|
||||||
margin-bottom: 40px;
|
font-family: 'PingFang SC';
|
||||||
}
|
font-weight: 500;
|
||||||
.img {
|
font-size: 20px;
|
||||||
width: 1200px;
|
margin-bottom: 20px;
|
||||||
height: auto;
|
}
|
||||||
margin-bottom: 40px;
|
.artical {
|
||||||
img {
|
width: 1200px;
|
||||||
width: 100%;
|
}
|
||||||
height: 100%;
|
.no-content {
|
||||||
|
margin-top: 40px;
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
.back {
|
||||||
|
margin-top: 40px;
|
||||||
|
padding: 10px 40px;
|
||||||
|
background: #0389ff;
|
||||||
|
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
|
||||||
|
border-radius: 16px;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
font-size: 20px;
|
||||||
|
color: $white;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.artical {
|
|
||||||
width: 1200px;
|
|
||||||
font-family: 'PingFang SC';
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 18px;
|
|
||||||
color: $black;
|
|
||||||
text-indent: 2em;
|
|
||||||
white-space: pre-wrap; /* 保留换行符,同时允许自动折行 */
|
|
||||||
word-break: break-word; /* 长单词截断 */
|
|
||||||
margin-bottom: 300px;
|
|
||||||
}
|
|
||||||
.back {
|
|
||||||
padding: 10px 40px;
|
|
||||||
background: #0389ff;
|
|
||||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
|
|
||||||
border-radius: 16px;
|
|
||||||
margin-bottom: 60px;
|
|
||||||
font-size: 20px;
|
|
||||||
color: $white;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,16 +1,23 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
defineOptions({name: 'New'})
|
defineOptions({name: 'New'})
|
||||||
import {ref, onMounted, nextTick, onActivated, onDeactivated} from 'vue'
|
import {ref, onMounted, nextTick, onActivated, onDeactivated, computed} from 'vue'
|
||||||
import Banner from '@/components/Banner/index.vue'
|
import Banner from '@/components/Banner/index.vue'
|
||||||
import Swiper from '@/components/Swiper/index.vue'
|
import Swiper from '@/components/Swiper/index.vue'
|
||||||
import {useRouter} from 'vue-router'
|
import {useRouter} from 'vue-router'
|
||||||
import {onBeforeRouteLeave} from 'vue-router'
|
import {onBeforeRouteLeave} from 'vue-router'
|
||||||
import {getNews} from '@/api/index'
|
import {getNews} from '@/api/index'
|
||||||
|
import {fontSize} from '@/utils'
|
||||||
|
|
||||||
const currentPage = ref(1)
|
const currentPage = ref(1)
|
||||||
const showLoad = ref(true)
|
const showLoad = ref(true)
|
||||||
const containerWidth = ref(1700)
|
const containerWidth = ref(fontSize(1700))
|
||||||
const containerHeight = ref(1400)
|
const containerHeight = computed(() => {
|
||||||
|
if (newList.value.length > 0) {
|
||||||
|
return 350 * newList.value.length
|
||||||
|
} else {
|
||||||
|
return 200
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getNewList()
|
getNewList()
|
||||||
@ -34,14 +41,20 @@ async function getNewList() {
|
|||||||
page: page.value.pageNum,
|
page: page.value.pageNum,
|
||||||
page_size: page.value.pageSize,
|
page_size: page.value.pageSize,
|
||||||
}
|
}
|
||||||
let {code, data, pagination} = await getNews(query)
|
|
||||||
if (code === 0) {
|
getNews(query)
|
||||||
newList.value = data
|
.then((res) => {
|
||||||
page.value.totalPages = pagination.total_pages
|
if (res.code === 0) {
|
||||||
showLoad.value = false
|
newList.value = res.data
|
||||||
} else {
|
page.value.totalPages = res.pagination.total_pages
|
||||||
showLoad.value = false
|
showLoad.value = false
|
||||||
}
|
} else {
|
||||||
|
showLoad.value = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
showLoad.value = false
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const toDetail = (item) => {
|
const toDetail = (item) => {
|
||||||
@ -68,12 +81,8 @@ onDeactivated(() => {
|
|||||||
|
|
||||||
onBeforeRouteLeave((to) => {
|
onBeforeRouteLeave((to) => {
|
||||||
if (to.name === 'Detail') return
|
if (to.name === 'Detail') return
|
||||||
|
|
||||||
// 去别的顶级菜单 → 销毁
|
|
||||||
const parent = to.matched[0]
|
const parent = to.matched[0]
|
||||||
if (parent?.name !== 'News') {
|
if (parent?.name !== 'News') {
|
||||||
// 通过修改路由 meta 让 keep-alive 排除当前组件
|
|
||||||
// 需要把 keep-alive 写成 :include="cachedNames" 并在 pinia 里维护数组
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
@ -93,24 +102,27 @@ onBeforeRouteLeave((to) => {
|
|||||||
>
|
>
|
||||||
<template #default="{item, index, isActive}">
|
<template #default="{item, index, isActive}">
|
||||||
<div class="my-card">
|
<div class="my-card">
|
||||||
<div
|
<template v-if="newList.length > 0">
|
||||||
class="news flex j-s"
|
<div
|
||||||
:class="{active: isActive}"
|
class="news flex j-s"
|
||||||
v-for="item in newList"
|
:class="{active: isActive}"
|
||||||
:key="item.id"
|
v-for="item in newList"
|
||||||
@click="toDetail(item)"
|
:key="item.id"
|
||||||
>
|
@click="toDetail(item)"
|
||||||
<div class="img">
|
>
|
||||||
<img :src="item.cover_image" />
|
<div class="img">
|
||||||
</div>
|
<img :src="item.cover_image" />
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="label">{{ item.title }}</div>
|
<div class="label">{{ item.title }}</div>
|
||||||
<div class="time">{{ item?.time }}</div>
|
<div class="time">{{ item?.time }}</div>
|
||||||
<div class="sub-label">{{ item?.subLabel }}</div>
|
<div class="sub-label">{{ item?.subLabel }}</div>
|
||||||
<div class="text">{{ item.snapshot }}</div>
|
<div class="text">{{ item.snapshot }}</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
|
<div v-else class="no-content">暂无内容</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</Swiper>
|
</Swiper>
|
||||||
@ -177,5 +189,10 @@ onBeforeRouteLeave((to) => {
|
|||||||
color: #999999;
|
color: #999999;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.no-content {
|
||||||
|
margin-top: 40px;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -46,7 +46,7 @@ const toBack = () => {
|
|||||||
|
|
||||||
<!-- 软件 -->
|
<!-- 软件 -->
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<div class="content software flex j-s">
|
<div class="content software flex">
|
||||||
<video autoplay muted loop @loadeddata="onVideoLoaded" v-show="!videoLoaded">
|
<video autoplay muted loop @loadeddata="onVideoLoaded" v-show="!videoLoaded">
|
||||||
<source :src="`./static/video/${query.video}`" type="video/mp4" />
|
<source :src="`./static/video/${query.video}`" type="video/mp4" />
|
||||||
</video>
|
</video>
|
||||||
@ -68,6 +68,8 @@ const toBack = () => {
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
:deep(.hardware) {
|
:deep(.hardware) {
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1.8;
|
||||||
margin-bottom: 40px;
|
margin-bottom: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -107,6 +109,7 @@ const toBack = () => {
|
|||||||
|
|
||||||
.software {
|
.software {
|
||||||
width: 1700px;
|
width: 1700px;
|
||||||
|
align-items: flex-start;
|
||||||
video {
|
video {
|
||||||
width: 65%;
|
width: 65%;
|
||||||
height: auto;
|
height: auto;
|
||||||
@ -152,7 +155,6 @@ const toBack = () => {
|
|||||||
|
|
||||||
.descripition {
|
.descripition {
|
||||||
width: 1000px;
|
width: 1000px;
|
||||||
font-size: 22px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.back {
|
.back {
|
||||||
|
|||||||
@ -5,7 +5,7 @@ onMounted(() => {})
|
|||||||
|
|
||||||
// 资质证书
|
// 资质证书
|
||||||
const certificateWidth = ref(1300)
|
const certificateWidth = ref(1300)
|
||||||
const certificateHeight = ref(500)
|
const certificateHeight = ref(700)
|
||||||
|
|
||||||
const currentPage = ref(1)
|
const currentPage = ref(1)
|
||||||
|
|
||||||
@ -20,7 +20,7 @@ const imgList = [
|
|||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
list: [
|
list: [
|
||||||
{id: 2.1, width: 290, height: 188, label: '大型活动保障', img: 'product/2.png'},
|
{id: 2.1, width: 290, height: 188, label: '要地防控', img: 'product/2.png'},
|
||||||
{id: 2.2, width: 210, height: 280, label: '区域低空监管组网', img: 'product/6.png'},
|
{id: 2.2, width: 210, height: 280, label: '区域低空监管组网', img: 'product/6.png'},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
@ -28,7 +28,7 @@ const imgList = [
|
|||||||
id: 3,
|
id: 3,
|
||||||
list: [
|
list: [
|
||||||
{id: 3.1, width: 290, height: 188, label: '关键基础设施守护', img: 'product/3.png'},
|
{id: 3.1, width: 290, height: 188, label: '关键基础设施守护', img: 'product/3.png'},
|
||||||
{id: 3.2, width: 210, height: 280, label: '要地防控', img: 'product/7.png'},
|
{id: 3.2, width: 210, height: 280, label: '大型活动保障', img: 'product/7.png'},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -54,8 +54,8 @@ const imgList = [
|
|||||||
:showHover="false"
|
:showHover="false"
|
||||||
>
|
>
|
||||||
<template #default="{item, index, isActive}">
|
<template #default="{item, index, isActive}">
|
||||||
<div class="certificate flex j-s a-c" :class="{active: isActive}">
|
<div class="certificate flex j-s" :class="{active: isActive}">
|
||||||
<div v-for="(list, listIdx) in imgList" :index="list.id" class="flex j-c a-c wrap">
|
<div v-for="list in imgList" :index="list.id" class="flex j-c wrap">
|
||||||
<div v-for="(img, imgIndex) in list.list" :key="imgIndex">
|
<div v-for="(img, imgIndex) in list.list" :key="imgIndex">
|
||||||
<div class="label">{{ img.label }}</div>
|
<div class="label">{{ img.label }}</div>
|
||||||
<img
|
<img
|
||||||
@ -77,9 +77,7 @@ const imgList = [
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
#certificate {
|
#certificate {
|
||||||
// margin-top: 60px;
|
|
||||||
.certificate {
|
.certificate {
|
||||||
margin-top: 40px;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
.label {
|
.label {
|
||||||
|
|||||||
Reference in New Issue
Block a user