371 lines
14 KiB
Vue
371 lines
14 KiB
Vue
<template>
|
||
<!-- PC端布局 -->
|
||
<div class="flex justify-between w-full h-full">
|
||
<!-- 左边导航栏 -->
|
||
|
||
<!-- 右边内容栏 -->
|
||
<div class="rightcon">
|
||
<div class="flex top_search">
|
||
<div style="width: 572px; height: 69px; margin-left: 415px">
|
||
<img :src="`/img/index/dlogo.png`" alt="" style="width: 100%; height: 100%; object-fit: cover" />
|
||
</div>
|
||
<div class="inputform">
|
||
<input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text"
|
||
placeholder="请输入搜索关键字" />
|
||
<div class="search_rinput">
|
||
<img src="/img/index/hmsearch.png" alt="" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="News_box">
|
||
<div class="lef_box">
|
||
<div class="re_box">
|
||
<div class="re_box_item">
|
||
<div class='re_mian'>青春寄语>未成年人保护法>正文</div>
|
||
<div class="re_title">团市委的主要职责</div>
|
||
<div class='flex justify-between re_rouse'>
|
||
<span>2024-07-23 10:52:00</span>
|
||
<span>来源：央视新闻客户端</span>
|
||
</div>
|
||
<div class="re_slice"></div>
|
||
<div class="re_content">
|
||
<span>一、领导全市的共青团工作。</span>
|
||
<span>二、负责全市团的组织建设，积极创新基层组织制度，协助党组织管理、选拔和培训团干部，对团校、青少年活动阵地、青少年报刊等事务进行规划和管理。</span>
|
||
<span>三、积极向党和政府反映青少年的意愿和呼声，提出意见和建议，充分发挥民主参与和民主监督作用。</span>
|
||
<span>
|
||
四、贯彻实施《河南省未成年人保护条例》，参与青少年事业发展规划和青少年工作政策的制定，积极实施希望工程，会同有关部门做好青少年权益保护和预防青少年犯罪工作，研究指导社区团的各项工作。
|
||
</span>
|
||
<span>五、调查青年思想动态和青年工作情况，研究青少年工作理论、青少年思想教育、青少年事业发展等项工作，提出相应对策，开展各种活动。</span>
|
||
<span>六、领导全市青联、学联和少先队工作，对全市性青年社团组织实行指导和管理。</span>
|
||
<span>七、协助教育部门做好大、中、小学校的教育管理工作，维护学校稳定和社会安定团结。</span>
|
||
<span>
|
||
八、会同有关部门对全市青少年外事工作实行归口管理和提供服务，负责与国外青少年团体、政府青年机构、国际地区性青年组织及其他友好团体的交流工作，负责青年对外宣传工作，负责做好青年统战对象的团结教育工作。
|
||
</span>
|
||
<span>九、围绕全市经济工作大局，组织和带领团员青年发挥生力军和突击队作用。</span>
|
||
<span>十、动员组织广大团员青年积极参与创建文明城市为主的各类创建活动。</span>
|
||
<span>十一、围绕党政工作大局，突出青年特点，完善服务内容，促进青年创业就业。</span>
|
||
<span>十二、做好党政机关团员青年效能建设工作，开展各种活动，带动机关服务质量、办事效率和执行力的进一步提高。</span>
|
||
<span>十三、承担市委交办的其他事项。</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="rig_box">
|
||
|
||
<n-tabs :bar-width="0" type="line"
|
||
class="custom-tabs" pane-style="background-color: #ffffff;">
|
||
<n-tab-pane name="oasis" tab="热门推荐" style="padding: 30px;">
|
||
<div class="flex flex-row" v-for="item,index in remList" :key="index" style="padding-bottom:30px;">
|
||
<div class="number_t" v-if="index == 0 || index == 1 || index == 2">
|
||
{{index+1 > 10 ? index + 1 : '0'+(index+1) }}
|
||
</div>
|
||
<div class="number_t1" v-else>
|
||
<span v-if="index+1 == 6" style="color: #D70E08;">{{index+1 > 10 ? index + 1 : '0'+(index+1) }}</span>
|
||
<span v-else>{{index+1 > 10 ? index + 1 : '0'+(index+1) }}</span>
|
||
</div>
|
||
<div class="content_t2">
|
||
<p class="p1 one-line-ellipsis">{{ item.title }}</p>
|
||
<p class="p2 flex justify-between items-center">
|
||
<span>{{ item.source }}</span>
|
||
<span class="flex items-center">
|
||
<img src="/img/views.png" alt="" style="padding-right: 10px;">
|
||
{{ item.views }}
|
||
</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</n-tab-pane>
|
||
<n-tab-pane name="jay chou" tab="精选文章" style="padding: 30px;">
|
||
<div class="flex flex-row" v-for="item,index in jinxList" :key="index" style="padding-bottom:30px;">
|
||
<div class="number_t" v-if="index == 0 || index == 1 || index == 2">
|
||
{{index+1 > 10 ? index + 1 : '0'+(index+1) }}
|
||
</div>
|
||
<div class="number_t1" v-else>
|
||
<span v-if="index+1 == 6" style="color: #D70E08;">{{index+1 > 10 ? index + 1 : '0'+(index+1) }}</span>
|
||
<span v-else>{{index+1 > 10 ? index + 1 : '0'+(index+1) }}</span>
|
||
</div>
|
||
<div class="content_t2">
|
||
<p class="p1 one-line-ellipsis">{{ item.title }}</p>
|
||
<p class="p2 flex justify-between items-center">
|
||
<span>{{ item.source }}</span>
|
||
<span class="flex items-center">
|
||
<img src="/img/views.png" alt="" style="padding-right: 10px;">
|
||
{{ item.views }}
|
||
</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</n-tab-pane>
|
||
</n-tabs>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右分享 -->
|
||
<!-- <div style="position: absolute;top: 300px;right:36px;" class="flex flex-col fiximg">
|
||
<img :src="`/img/index/douyin.png`" alt="">
|
||
<img :src="`/img/index/wb.png`" alt="">
|
||
<img :src="`/img/index/wx.png`" alt="">
|
||
<img :src="`/img/index/blbl.png`" alt="">
|
||
</div> -->
|
||
<!-- 底部鼠标 -->
|
||
<div style="position: absolute; bottom: 30px; right: 30px">
|
||
<img :src="`/img/index/hmouse.png`" alt="" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { NTabs,NTabPane } from 'naive-ui'
|
||
import $api from '@/service/webRequest'
|
||
const inputSearch = ref('')
|
||
const page = ref(1);
|
||
const jinxList = ref([]);
|
||
const remList = ref([]);
|
||
const getjinxList = async () => {
|
||
const res = await $api.post('/api/home.news/index',
|
||
{
|
||
limit:6,
|
||
page:page.value,
|
||
fine:1
|
||
}
|
||
)
|
||
jinxList.value = res.data.data.list;
|
||
}
|
||
const getremList = async () => {
|
||
const res = await $api.post('/api/home.news/index',
|
||
{
|
||
limit:6,
|
||
page:page.value,
|
||
hot:1
|
||
}
|
||
)
|
||
remList.value = res.data.data.list;
|
||
}
|
||
//加载中
|
||
onMounted(() => {
|
||
getjinxList();
|
||
getremList();
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '@/assets/index.scss';
|
||
|
||
/* pc端样式 */
|
||
|
||
.rightcon {
|
||
width: 1920px;
|
||
height: 100%;
|
||
background-image: url('/img/xwdt.png');
|
||
background-size: 100% 100%;
|
||
|
||
.fiximg {
|
||
img {
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.top_search {
|
||
margin-top: 50px;
|
||
height: 70px;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.inputform {
|
||
position: relative;
|
||
width: 340px;
|
||
margin-right: 319px;
|
||
}
|
||
|
||
.contactInput {
|
||
width: 337px;
|
||
height: 50px;
|
||
background: #ffffff;
|
||
border-radius: 8px;
|
||
border: 1px solid #dee4e8;
|
||
padding-left: 15px;
|
||
}
|
||
|
||
.contactInput::placeholder {
|
||
color: #999999;
|
||
}
|
||
|
||
.contactInput:focus {
|
||
outline: none;
|
||
}
|
||
|
||
.search_rinput {
|
||
width: 68px;
|
||
height: 50px;
|
||
background: #e6e6e6;
|
||
border-radius: 0px 8px 8px 0px;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.News_box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 1300px;
|
||
margin: 0 auto;
|
||
|
||
.lef_box {
|
||
width: 835px;
|
||
.re_box {
|
||
width: 100%;
|
||
height: 680px;
|
||
margin: 0 auto;
|
||
margin-top: 40px;
|
||
padding-left: 100px;
|
||
|
||
.re_box_item {
|
||
width: 100%;
|
||
background: #ffffff;
|
||
border: 1px solid #eef7ff;
|
||
padding: 30px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
/* 允许换行 */
|
||
justify-content: flex-start;
|
||
/* 项目左对齐 */
|
||
|
||
.re_slice {
|
||
width: 841px;
|
||
border-bottom: 1px dashed #bbbbbb;
|
||
margin-top: 20px;
|
||
margin-bottom: 30px;
|
||
}
|
||
.re_mian {
|
||
width: 248px;
|
||
font-family: Microsoft YaHei UI;
|
||
font-weight: 400;
|
||
font-size: 16px;
|
||
color: #666666;
|
||
}
|
||
.re_rouse{
|
||
font-family: Microsoft YaHei UI;
|
||
font-weight: 400;
|
||
font-size: 16px;
|
||
color: #999999;
|
||
width: 100%;
|
||
margin-top: 10px;
|
||
}
|
||
.re_title {
|
||
width: 100%;
|
||
font-family: Microsoft YaHei UI;
|
||
font-weight: 500;
|
||
font-size: 36px;
|
||
color: #393939;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.re_content {
|
||
width: 100%;
|
||
height: 100%;
|
||
font-family: Microsoft YaHei UI;
|
||
font-weight: 400;
|
||
font-size: 16px;
|
||
color: #999999;
|
||
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.rig_box {
|
||
width: 439px;
|
||
height: 100%;
|
||
margin-top: 40px;
|
||
margin-left: 40px;
|
||
.custom-tabs {
|
||
.number_t{
|
||
width: 34px;
|
||
height: 34px;
|
||
background: #FFA234;
|
||
border-radius: 17px;
|
||
font-family: Microsoft YaHei UI;
|
||
font-weight: 400;
|
||
font-size: 18px;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-right: 20px;
|
||
}
|
||
.number_t1{
|
||
width: 34px;
|
||
height: 34px;
|
||
background: #FFFFFF;
|
||
border-radius: 17px;
|
||
font-family: Microsoft YaHei UI;
|
||
font-weight: 400;
|
||
font-size: 18px;
|
||
color: #323232;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: end;
|
||
margin-right: 20px;
|
||
}
|
||
.content_t2{
|
||
font-family: Microsoft YaHei UI;
|
||
font-weight: 400;
|
||
width: 80%;
|
||
.p1{
|
||
margin-top: 7px;
|
||
font-size: 18px;
|
||
color: #393939;
|
||
}
|
||
.p2{
|
||
margin-top: 15px;
|
||
font-size: 16px;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep(.n-tabs .n-tabs-tab-wrapper){
|
||
width: 215px;
|
||
height: 72px;
|
||
background: #ffffff;
|
||
|
||
font-size: 18px;
|
||
justify-content: center;
|
||
}
|
||
:deep(.n-tabs .n-tabs-tab .n-tabs-tab__label){
|
||
font-family: Microsoft YaHei UI;
|
||
font-weight: 400;
|
||
font-size: 18px;
|
||
}
|
||
:deep(.n-tabs.n-tabs--line-type .n-tabs-tab:hover, .n-tabs.n-tabs--bar-type .n-tabs-tab:hover){
|
||
color: #348CDE;
|
||
}
|
||
:deep(.n-tabs.n-tabs--line-type .n-tabs-tab.n-tabs-tab--active,.n-tabs.n-tabs--bar-type .n-tabs-tab.n-tabs-tab--active){
|
||
color: #348CDE;
|
||
background: #F1F8FF;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
border-top:solid 2px #378FDF;
|
||
}
|
||
:deep(.n-tabs .n-tabs-tab-pad){
|
||
width: 0;
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
</style>
|