dlsx
/
Teaching_integration_platform_template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加顶部新闻列表

Browse Source
develoop
xy 2 weeks ago
parent 82738012e1
commit b23c8a3ff1
5 changed files with 108 additions and 45 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/Layout/index.vue
  2. 17
      src/Layout/main/index.vue
  3. 35
      src/styles/index.scss
  4. 76
      src/views/pedagogicalReform/index.vue
  5. 24
      src/views/scientificResearch/index.vue

1
src/Layout/index.vue
Unescape View File

@ -95,6 +95,7 @@ onMounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.main-container { .main-container {
padding-top: 120px;
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
background-color: #eef1fb; background-color: #eef1fb;

17
src/Layout/main/index.vue
Unescape View File

@ -6,7 +6,22 @@
</section> --> </section> -->
<div class="view-container"> <div class="view-container">
<div class="banner"> <div class="banner">
<img :src="adminInfoStore.info.promotionalImages" alt="" style="max-height: 409px;"> <div class="left">
<img :src="adminInfoStore.info.promotionalImages" alt="" style="max-height: 409px;">
</div>
<div class="news">
<div class="newTop">新闻</div>
<div class="newButton">
<ul>
<li>未来产业由前沿技术驱动，当前处于孕育萌发阶段或产业化初期</li>
<li>前瞻部署、梯次培育。顺应新一轮科技革命和产业变革趋势</li>
<li>创新驱动、应用牵引。以前沿技术突破引领未来产业发展</li>
<li>某高校正式启动新版教学一体化师生管理后台</li>
<li>教学一体化师生管理后台助力某高校实现智慧教学</li>
</ul>
</div>
</div>
<div class="source-box"> <div class="source-box">
<div class="source"> <div class="source">
{{ adminInfoStore.info.name }} {{ adminInfoStore.info.name }}

35
src/styles/index.scss
Unescape View File

@ -3,16 +3,47 @@
.banner { .banner {
width: 100%; width: 100%;
height: 410px; height: 300px;
// background: url('../assets/images/banner4.jpg') no-repeat; // background: url('../assets/images/banner4.jpg') no-repeat;
// background-size: cover // background-size: cover
position: relative; position: relative;
display: flex;
.left{
width: 70%;
}
.news{
width: 30%;
background-color: #e6f3fc;
.newTop{
height: 40px;
line-height: 40px;
background-color: #eaf4fd;
padding-left: 10px;
font-size: 18px;
color: #3374ff;
}
.newButton{
height: 350px;
// background-color: pink;
}
.newButton ul li{
font-size: 15px;
padding: 16px;
list-style-type: disc ;
color:#6da0ff;
list-style-position:inside;
}
.newButton ul li:hover{
color: #081018;
}
}
img{ img{
width: 100%; width: 100%;
height: 100%;
} }
.source-box { .source-box {
position: absolute; position: absolute;
top: 50%; top: 40%;
left: 180px; left: 180px;
.source { .source {

76
src/views/pedagogicalReform/index.vue
Unescape View File

@ -1,7 +1,7 @@
<template> <template>
<div class="header_title"> <div class="header_title" >
<span>资讯新闻</span> <span>资讯新闻</span>
<el-divider style="width: 800px"/> <el-divider style="margin: 30px auto;"/>
</div> </div>
<div class="container"> <div class="container">
<div class="left"> <div class="left">
@ -9,27 +9,27 @@
<li v-for="category in column" :key="category.id"> <li v-for="category in column" :key="category.id">
<div class="box"> <div class="box">
<div class="categorySty"> <div class="categorySty">
<span>· {{category.categoryName}}</span> <span>· {{ category.categoryName }}</span>
</div> </div>
<div style="margin-left: 10px"> <div style="margin-left: 10px">
<ul v-if="category.essays"> <ul v-if="category.essays">
<li class="essaySty" v-for="essay in category.essays" :key="essay.id" @click="selectEssay(essay)"> <li class="essaySty" v-for="essay in category.essays" :key="essay.id" @click="selectEssay(essay)">
<span>{{essay.title}}</span> <span>{{ essay.title }}</span>
<span>{{essay.publishTime}}</span> <span>{{ essay.publishTime }}</span>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</li> </li>
</ul> </ul>
<el-divider/> <el-divider />
</div> </div>
</div> </div>
</template> </template>
<script lang='ts' setup> <script lang='ts' setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue' import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import {queryCategory,queryEssay} from '@/api/news' import { queryCategory, queryEssay } from '@/api/news'
const column = ref([]) const column = ref([])
const essayContent = ref({}) const essayContent = ref({})
//获取栏目信息 //获取栏目信息
@ -38,7 +38,7 @@ const CategoryList = async () => {
column.value = res.data column.value = res.data
// console.log(column.value,'栏目信息') // console.log(column.value,'栏目信息')
} }
const selectEssay =async (essay)=>{ const selectEssay = async (essay) => {
essayContent.value = essay essayContent.value = essay
// console.log(essayContent,'所选文章') // console.log(essayContent,'所选文章')
}; };
@ -51,7 +51,7 @@ const fetchCategoriesAndEssays = async () => {
for (const category of column.value) { for (const category of column.value) {
const essaysResponse = await queryEssay(category.id); const essaysResponse = await queryEssay(category.id);
category.essays = essaysResponse.data || []; category.essays = essaysResponse.data || [];
console.log(category.essays,'s') console.log(category.essays, 's')
} }
} catch (error) { } catch (error) {
console.error('查找信息失败', error); console.error('查找信息失败', error);
@ -64,52 +64,64 @@ onMounted(() => {
</script> </script>
<style scoped> <style scoped>
.header_title{ .header_title {
font-size: 20px; font-size: 25px;
color: dodgerblue; color: #293352;
text-align: center;
font-weight: bold; font-weight: bold;
margin-left:490px;
margin-top: 30px; margin-top: 30px;
} }
.left{
margin-left: 600px; /* .left {
margin-top: 10px; /* margin-left: 600px;
height: 85vh; margin-top: 10px; */
overflow-y: auto; /* height: 85vh; */
} /* overflow-y: auto; */
.left::-webkit-scrollbar { .left::-webkit-scrollbar {
width: 0px; width: 0px;
} }
.box{
width: 502px; .box {
margin-bottom: 5px; margin: 0 auto;
width: 900px;
margin-bottom: 10px;
/* border: 1px solid pink; */
} }
.categorySty{
.categorySty {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 25px; font-size: 25px;
font-weight: 550; font-weight: 550;
width: 560px; width: 560px;
height: 50px; height: 60px;
line-height: 50px; line-height: 50px;
/*background: #FFB21E;*/ /*background: #FFB21E;*/
} }
.categorySty:hover{
.categorySty:hover {
background: gainsboro; background: gainsboro;
cursor: pointer; cursor: pointer;
} }
.essaySty{
display: flex; /* 启用Flexbox布局 */ .essaySty {
justify-content: space-between; /* 水平方向两端对齐 */ display: flex;
align-items: center; /* 垂直居中对齐 */ /* 启用Flexbox布局 */
justify-content: space-between;
/* 水平方向两端对齐 */
align-items: center;
/* 垂直居中对齐 */
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
margin-bottom: 5px; margin-bottom: 10px;
width:520px; width: 800px;
font-size: 20px; font-size: 20px;
margin-left: 30px; margin-left: 30px;
/*background: #FFB21E;*/ /*background: #FFB21E;*/
} }
.essaySty:hover{
.essaySty:hover {
background: gainsboro; background: gainsboro;
cursor: pointer; cursor: pointer;
} }

24
src/views/scientificResearch/index.vue
Unescape View File

@ -1,18 +1,18 @@
<template> <template>
<div class="content"> <div class="content">
<el-card style="max-width:800px;height: 80vh"> <el-card style="max-width:1200px;height: 80vh">
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
<span>关于我们</span> <span>关于我们</span>
</div> </div>
</template> </template>
<div class="news_main"> <div class="news_main">
<!-- {{ aboutEssay.content }}--> <!-- {{ aboutEssay.content }}-->
<textarea v-model="aboutEssay.content" class="textSty"></textarea> <textarea v-model="aboutEssay.content" class="textSty"></textarea>
</div> </div>
<!-- <template #footer>--> <!-- <template #footer>-->
<!-- <span>...</span>--> <!-- <span>...</span>-->
<!-- </template>--> <!-- </template>-->
</el-card> </el-card>
</div> </div>
</template> </template>
@ -38,28 +38,32 @@ onMounted(()=>{
justify-content: center; justify-content: center;
} }
.el-card{ .el-card{
width: 800px; width: 1200px;
height: 80vh; height: 80vh;
margin-top: 30px; margin-top: 0px;
margin-bottom: 30px; margin-bottom: 0px;
background-color: #eef1fb;
} }
.card-header{ .card-header{
font-size: 25px; font-size: 25px;
color: #6da0ff; color:#293352;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
} }
.news_main{ .news_main{
padding: 20px; padding: 20px;
height: 80vh; height: 80vh;
font-size: 20px; font-size: 18px;
line-height: 1.5; line-height: 1.5;
overflow-y: auto; overflow-y: auto;
color: #666666;
} }
.textSty{ .textSty{
width: 100%; width: 100%;
height:65vh; height:65vh;
border: none; border: none;
background-color: #eef1fb;
} }
.textSty::-webkit-scrollbar{ .textSty::-webkit-scrollbar{
width: 0px; width: 0px;

Write Preview
Loading…
Cancel
Save