基于VUE3门户项目（二）

在上一篇的基础上这次我们更新了多种发布类型（纯文本,图片和文字,纯图片）加入了登录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年一线开发经验 如有需要私信联系

感谢你的关注。觉得有用点个赞吧！！！！！！！！