在上一篇的基础上这次我们更新了多种发布类型(纯文本,图片和文字,纯图片)加入了登录login框
界面效果
代码 home.vue
<template>
<div class="home">
<div class="app-content">
<!-- 左侧 -->
<div class="common">
<a-tabs v-model:activeKey="activeKey">
<a-tab-pane
v-for="(item, index) in TabList"
:key="index"
:tab="item.title"
>
<div v-for="(arr, index) in homeList" :key="index">
<div>
<div
:class="['home-card-article', 'home-article-wrapper_1']"
v-if="arr.type == '1'"
>
<div :class="[arr.istop ? 'title' : '', 'allcommonTitle']">
{{ arr.title }}
</div>
</div>
<div
:class="['home-card-article', 'home-article-wrapper']"
v-if="arr.type == '2'"
>
<div class="img_info">
<img class="imgItem" :src="arr.url" />
</div>
<div :class="[arr.istop ? 'title' : '', 'commonTitle']">
<div>
{{ arr.title }}
</div>
<div class="feed_item">
<div class="feed_common_1">
<div class="feed_span">{{ arr.dept }}</div>
<div class="feed_span" v-if="arr.comment">
{{ arr.comment }}评论
</div>
<div class="feed_span">{{ arr.createTime }}</div>
</div>
<div class="feed_common feed_right">
<CloseOutlined
:style="{
fontSize: '14px',
color: '#ccc',
}"
/>
</div>
</div>
</div>
</div>
<div
:class="['home-card-article', 'home-article-wrapper']"
v-if="arr.type == '3'"
>
<div
:class="[
arr.istop ? 'title' : '',
'allcommonTitle',
'home-cover-title',
]"
>
{{ arr.title }}
</div>
<div class="cover-list">
<div
v-for="(item, index) in arr.imageList"
:key="index"
class="feed-card-cover"
>
<img :src="arr.url" />
</div>
</div>
<div :class="['feed_item', 'feed_three_item_card']">
<div class="feed_common_1">
<div class="feed_span">{{ arr.dept }}</div>
<div class="feed_span" v-if="arr.comment">
{{ arr.comment }}评论
</div>
<div class="feed_span">{{ arr.createTime }}</div>
</div>
<div class="feed_common feed_right">
<CloseOutlined
:style="{
fontSize: '14px',
color: '#ccc',
}"
/>
</div>
</div>
</div>
</div>
</div>
</a-tab-pane>
</a-tabs>
</div>
<!-- 右侧 -->
<div class="common_right">
<div class="loginItem">
<div>
<div class="itemTitle">更多内容为您呈现</div>
<div class="itembutton">
<el-button type="danger" @click="loginShow">立即登录</el-button>
</div>
</div>
</div>
<div>
<div class="topInfo">
<div class="topIcon">
<icon-font
:style="{
fontSize: '16px',
color: '#f56c6c',
marginRight: '5px',
}"
type="icon-resou"
/>热点推荐
<span
:style="{
fontSize: '14px',
color: '#f56c6c',
float: 'right',
cursor: 'pointer',
}"
>
<RedoOutlined
:style="{
fontSize: '14px',
color: '#f56c6c',
}"
/>
换一批
</span>
</div>
<div>
<div class="topItem">
<icon-font
:style="{ fontSize: '16px', color: '#f56c6c' }"
type="icon-top"
/>
共促开放合作 共创美好未来
</div>
<div v-for="(item, index) in ToprightList" :key="index">
<div class="topItem">
{{ item.title }}
<icon-font
:style="{ fontSize: '16px', color: '#f56c6c' }"
type="icon-reInfo"
/>
</div>
</div>
</div>
</div>
</div>
<a-modal
v-model:open="open"
:title="title"
:centered="true"
:footer="null"
:heigth="300"
:width="500"
:bodyStyle="bodystyle"
>
<div>
<a-form
v-if="loginType == '1'"
:model="formState"
name="basic"
:label-col="{ span: 3 }"
:wrapper-col="{ span: 16 }"
autocomplete="off"
@finish="onFinish"
@finishFailed="onFinishFailed"
>
<a-form-item
label="账号"
name="username"
:rules="[{ required: true, message: '请输入账号' }]"
>
<a-input v-model:value="formState.username" />
</a-form-item>
<a-form-item
label="密码"
name="password"
:rules="[{ required: true, message: '请输入密码' }]"
>
<a-input-password v-model:value="formState.password" />
</a-form-item>
<a-form-item :wrapper-col="{ offset: 3, span: 16 }">
<a-button type="primary" :block="true" html-type="submit"
>登录</a-button
>
</a-form-item>
</a-form>
<div v-else>
<a-qrcode
error-level="H"
value="https://www.antdv.com"
icon="https://www.antdv.com/assets/logo.1ef800a8.svg"
/>
</div>
<div class="loginFloor">
<span> 其他方式 </span><ExpandOutlined @click="changeLoginType" />
<a-button style="float: right" type="link">注册</a-button>
</div>
</div>
</a-modal>
<a-back-top />
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import {
createFromIconfontCN,
RedoOutlined,
CloseOutlined,
ExpandOutlined,
} from "@ant-design/icons-vue";
// import { AQRCode } from 'ant-design-vue';
// import QrcodeVue from "qrcode.vue";
import homeBg from "@/assets/images/home.jpg";
const IconFont = createFromIconfontCN({
scriptUrl: "./iconfont.js",
});
const open = ref<boolean>(false);
interface FormState {
username: string;
password: string;
remember: boolean;
}
const formState = reactive<FormState>({
username: "",
password: "",
remember: true,
});
const bodystyle = {
height: "180px",
};
// const codeUrl = ref("https://www.baidu.com");
const size = ref<number>(180);
const title = ref<String>("账号登录"); //登录标题名称
const loginType = ref<String>("1"); //登录类型
const onFinish = (values: any) => {
console.log("Success:", values);
};
const onFinishFailed = (errorInfo: any) => {
console.log("Failed:", errorInfo);
};
const activeKey = ref(0);
const TabList = ref<array>([
{ title: "推荐", id: "1" },
{ title: "热点", id: "2" },
{ title: "新闻", id: "3" },
{ title: "开源", id: "4" },
{ title: "娱乐", id: "5" },
{ title: "视频", id: "6" },
{ title: "游戏", id: "7" },
{ title: "国际", id: "8" },
{ title: "财经", id: "9" },
{ title: "下载", id: "10" },
// { title: "更多", id: "11" },
]);
const ToprightList = ref<array>([
{ title: "共促开放合作 共创美好未来", id: "1" },
{ title: "美将对华出售芯片 但不卖最顶尖的", id: "2" },
{ title: "期待杭州亚运会到来", id: "3" },
{ title: "上海现不明飞行物 似火球般高速坠落", id: "4" },
{ title: "共促开放合作 共创美好未来", id: "5" },
{ title: "美将对华出售芯片 但不卖最顶尖的", id: "6" },
{ title: "期待杭州亚运会到来", id: "7" },
{ title: "上海现不明飞行物 似火球般高速坠落", id: "7" },
{ title: "期待杭州亚运会到来", id: "9" },
{ title: "上海现不明飞行物 似火球般高速坠落", id: "10" },
// { title: "更多", id: "11" },
]);
const homeList = ref<array>([
{
title: "深圳:全市停工 非必要不外出",
id: "1",
content: "",
istop: true,
url: "",
type: 1,
dept: "设计部",
comment: "245",
createTime: "2023-09-05",
},
{
title: "北京发生2.7级地震",
content: "",
id: "2",
url: homeBg,
istop: true,
type: 1,
dept: "设计部",
comment: "245",
createTime: "2023-09-05",
},
{
title: "实拍台风风眼画面!飞机对“苏拉”进行探测:结构紧密清晰可见",
id: "3",
content: "",
url: "",
istop: true,
type: 1,
dept: "设计部",
comment: "245",
createTime: "2023-09-05",
},
{
title: "9月全球重要节日梳理好了,请注意查收!|巴西|韩国|国庆日",
content:
" 金秋九月,这些日子值得关注→2023-09-01 10:21转眼间,九月来了 瓜果渐熟,稻谷飘香,蟹肥菊黄…… 新的一个月,继续努力前行! 愿你在金秋九月 收获满满,硕果累累地址,",
id: "4",
istop: false,
type: 2,
url: homeBg,
dept: "设计部",
comment: "245",
createTime: "2023-09-05",
},
{
title: "北京朝阳区发生2.7级地震,很多市民表示震感明显",
content:
"据中国地震台网正式测定,9月1日15时34分在北京顺义区发生2.7级地震,震源深度17公里,震中位于北纬40.14度,东经116.48度",
id: "5",
istop: false,
type: 3,
url: homeBg,
imageList: [homeBg, homeBg, homeBg, homeBg],
dept: "设计部",
comment: "245",
createTime: "2023-09-05",
},
{
title: "北京发生2.7级地震",
content: "",
id: "2",
url: homeBg,
istop: false,
type: 1,
dept: "设计部",
comment: "245",
createTime: "2023-09-05",
},
{
title: "实拍台风风眼画面!飞机对“苏拉”进行探测:结构紧密清晰可见",
id: "3",
content: "",
url: "",
istop: false,
type: 1,
dept: "设计部",
comment: "245",
createTime: "2023-09-05",
},
{
title: "9月全球重要节日梳理好了,请注意查收!|巴西|韩国|国庆日",
content:
" 金秋九月,这些日子值得关注→2023-09-01 10:21转眼间,九月来了 瓜果渐熟,稻谷飘香,蟹肥菊黄…… 新的一个月,继续努力前行! 愿你在金秋九月 收获满满,硕果累累地址,",
id: "4",
istop: false,
type: 2,
url: homeBg,
dept: "设计部",
comment: "245",
createTime: "2023-09-05",
},
{
title: "北京朝阳区发生2.7级地震,很多市民表示震感明显",
content:
"据中国地震台网正式测定,9月1日15时34分在北京顺义区发生2.7级地震,震源深度17公里,震中位于北纬40.14度,东经116.48度",
id: "5",
istop: false,
type: 3,
url: homeBg,
imageList: [homeBg, homeBg, homeBg, homeBg],
dept: "设计部",
comment: "245",
createTime: "2023-09-05",
},
{
title: "北京发生2.7级地震",
content: "",
id: "2",
url: homeBg,
istop: false,
type: 1,
dept: "设计部",
comment: "245",
createTime: "2023-09-05",
},
{
title: "实拍台风风眼画面!飞机对“苏拉”进行探测:结构紧密清晰可见",
id: "3",
content: "",
url: "",
istop: false,
type: 1,
dept: "设计部",
comment: "245",
createTime: "2023-09-05",
},
{
title: "9月全球重要节日梳理好了,请注意查收!|巴西|韩国|国庆日",
content:
" 金秋九月,这些日子值得关注→2023-09-01 10:21转眼间,九月来了 瓜果渐熟,稻谷飘香,蟹肥菊黄…… 新的一个月,继续努力前行! 愿你在金秋九月 收获满满,硕果累累地址,",
id: "4",
istop: false,
type: 2,
url: homeBg,
dept: "设计部",
comment: "245",
createTime: "2023-09-05",
},
{
title: "北京朝阳区发生2.7级地震,很多市民表示震感明显",
content:
"据中国地震台网正式测定,9月1日15时34分在北京顺义区发生2.7级地震,震源深度17公里,震中位于北纬40.14度,东经116.48度",
id: "5",
istop: false,
type: 3,
url: homeBg,
imageList: [homeBg, homeBg, homeBg, homeBg],
dept: "设计部",
comment: "245",
createTime: "2023-09-05",
},
]);
const loginShow = () => {
open.value = true;
};
const changeLoginType = () => {
loginType.value = "2";
};
</script>
<style lang="scss" scoped>
.home {
border-top: 4px solid #f6f6f6;
background: #fafcff;
min-height: calc(100vh - 95px);
padding-bottom: 10px;
.app-content {
width: 1066px;
margin: 0 auto;
padding: 16px 16px 0;
display: flex;
-moz-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
.common {
background: #fafcff;
margin-top: 10px;
width: 676px;
}
.common_right {
align-self: flex-start;
width: 318px;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.home-article-wrapper {
padding: 16px 0;
}
.home-article-wrapper_1 {
padding: 4px 0;
}
.home-card-article {
font-size: 20px;
color: #222;
position: relative;
.commonTitle {
position: relative;
width: calc(100% - 160px);
height: 120px;
&:hover {
color: #1890ff;
cursor: pointer;
}
}
.allcommonTitle {
&:hover {
color: #1890ff;
cursor: pointer;
}
}
.home-cover-title {
display: block;
padding-bottom: 8px;
}
.title {
&::after {
content: "置顶";
display: inline-block;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #f04142;
background: #fafcff;
border-radius: 4px;
padding: 2px 4px;
position: relative;
top: -2px;
left: 6px;
}
}
.img_info {
display: block;
float: right;
margin-left: 20px;
.imgItem {
position: relative;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 4px;
border: 1px solid #f2f2f2;
width: 160px;
height: 120px;
cursor: pointer;
}
}
.cover-list {
display: block;
padding-top: 0;
.feed-card-cover {
display: inline-block;
margin-right: 12px;
position: relative;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 4px;
border: 1px solid #f2f2f2;
width: 160px;
height: 120px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.feed-card-cover:last-child {
margin-right: 0;
}
}
}
.loginItem {
height: 160px;
display: flex;
margin-top: 20px;
background: #f6f6f6;
font-size: 20px;
flex-wrap: wrap;
align-items: center;
justify-content: center;
.itemTitle {
width: 100%;
text-align: center;
}
.itembutton {
margin-top: 10px;
text-align: center;
}
}
.topInfo {
margin-top: 10px;
background: #fff;
height: calc(100vh - 315px);
padding: 10px;
.topIcon {
border-bottom: 1px solid #e9e9eb;
height: 25px;
}
.topItem {
font-size: 16px;
padding: 10px 5px;
&:hover {
color: #1890ff;
cursor: pointer;
}
}
}
}
.feed_item {
position: absolute;
bottom: 0px;
width: 100%;
font-size: 14px;
padding-right: 24px;
.feed_common_1 {
float: left;
}
.feed_common {
float: right;
text-align: right;
}
.feed_span {
display: inline-block;
margin-right: 20px;
line-height: 20px;
color: #999;
// cursor: default;
}
}
.feed_three_item_card {
padding-right: 0 !important;
}
.loginFloor {
width: 100%;
height: 30px;
line-height: 30px;
span {
margin-right: 12px;
}
}
::v-deep(.ant-tabs-nav) {
&:before {
border: none !important;
}
}
::v-deep(.ant-tabs-tab) {
font-size: 20px;
}
::v-deep(.ant-tabs-tab-active) {
font-size: 20px;
}
::v-deep(.ant-modal-content) {
background: #f5f5f5 !important;
}
::v-deep(.ant-modal-title) {
background: #f5f5f5 !important;
}
</style>
这样页面就写好了 这个项目我有空的话后续会更新成前端后端可发布的完整的项目。
源码地址gitee:https://gitee.com/wuhongyu123456/stu-wike
或者私聊博主
如果在写毕业设计需要参考的话一个很好的项目 其他问题也欢迎咨询
可开发app h5 pc web端 微信小程序 微信公众号等项目 拥有5年一线开发经验 如有需要私信联系
感谢你的关注。觉得有用点个赞吧!!!!!!!!