前端页面学习+vue

关于2019年度上海交通大学决策咨询</span><span class="main-text">关于2019年度上海交通大学决策咨询</span><span class="main-text">关于2019年度上海交通大学决策咨询</span><span class="main-text">关于2019年度上海交通大学决策咨询

z2448244313

1013人浏览 · 2025-11-20 16:51:33

z2448244313 · 2025-11-20 16:51:33 发布

建立vue项目

建立html文件

用javascript实现vue工具的引用和html元素挂载

在vue文件实现对应代码、

运行项目

1.建立vue项目（以node.js平台为例,npm是node.js的包管理器)

# 1. 创建项目（直接命名）
npm create vue@latest my-vue-app

# 2. 进入项目目录
cd my-vue-app

# 3. 安装依赖
npm install

# 4. 启动开发服务器
npm run dev

2.建立html文件

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>荆州市长江河道管理局</title>

</head>

<body>
    <!--vue应用挂点-->
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>

</body>

</html>

3.用javascript实现vue工具的引用和html元素挂载

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount("#app")

4.在vue文件实现对应代码

export default {

}

以下是vue文件里面简单代码

</script>

<h1 class="title-up">荆州市河道管理局</h1>

</div>

</div>

<div class="icon-text">政府信息公开</div>

</div>

</div>

</div>

<div class="big-title">奋楫实干启新程笃行致远筹新绩</div>

</div>

</div>

</div>

<div class="til">调研助发展交流共提升</div>

<p>为切实帮扶周梁玉桥社区困难居民，让困难群众欢度

春节,1月20日下午,荆州市长江河道管理局副局长甲维

强来到沙市区周梁玉桥社区开展"迎新春送温暖"</p>

</div>

</div>

</div>

</div>

<span class="main-text">关于2019年度上海交通大学决策咨询</span>

</div>

<span class="main-text">关于2019年度上海交通大学决策咨询</span>

</div>

<span class="main-text">关于2019年度上海交通大学决策咨询</span>

</div>

<span class="main-text">关于2019年度上海交通大学决策咨询</span>

</div>

</div>

</div>

</div>

<span class="content-text">《人民日报》发表字国英部长署名推动水利高质量发展保障我国水安全</span>

</div>

</div>

<span class="content-text">水利部印发新版《河道管理条例》加强河道保护管理</span>

</div>

</div>

<span class="content-text">长江流域重点水利工程稳步推进预计年底完工</span>

</div>

</div>

<span class="content-text">水利科技创新成果显著多项技术获国家专利</span>

</div>

</div>

<div class="part-text">水利工程建设</div>

</div>

<div class="part-text">河道巡查管理</div>

</div>

</div>

<div class="part-text">水资源保护</div>

</div>

<div class="part-text">水环境治理</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="link-item">水利部官网</div>

<div class="link-item">长江水利委员会</div>

<div class="link-item">湖北省水利厅</div>

<div class="link-item">中国水利网</div>

<div class="link-item">水资源管理</div>

</div>

</div>

</div>

</template>

export default {

}

</script>

<style>

* {

margin: 0;

padding: 0;

}

.header-container {

position: relative;

height: 25vh;

width: 100%;

}

.header-bg {

background-size: cover;

background-position: center;

background-repeat: no-repeat;

position: absolute;

top: 0;

left: 0;

height: 27.3vh;

width: 100%;

z-index: 1;

}

/*背景遮罩层，让文字更清晰*/

/* .header-overlay {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: linear-gradient(135deg,

rgba(30, 60, 114, 0.7) 0%,

rgba(42, 82, 152, 0.5) 100%);

} */

.center-upper {

position: absolute;

top: 0;

height: 100%;

width: 100%;

display: grid;

justify-items: center;

/* 改为两端对齐 */

/*水平居中*/

/* align-items: center; */

/*垂直居中*/

z-index: 2;

}

.header-logo {

grid-area: 1/1;

position: relative;

top: 4.5%;

width: 25px;

height: 25px;

}

.title-up {

grid-area: 1/1;

position: relative;

color: rgb(51, 80, 110);

font-size: 22px;

top: 18%;

}

.english-up {

grid-area: 1/1;

position: relative;

color: rgb(138, 156, 166);

font-size: 9px;

top: 31%;

}

.search-container {

display: flex;

grid-area: 1/1;

position: absolute;

top: 44%;

}

.search-input {

background: white;

position: relative;

width: 200px;

height: 22px;

border: 1px solid white;

box-sizing: border-box;

border-radius: 1px 0 0 1px;

}

.search-btn {

position: relative;

height: 22px;

width: 50px;

color: rgb(53, 121, 186);

border: 3px solid white;

border-radius: 0 1px 1x 0;

}

.switch-color {

display: flex;

width: 100%;

position: absolute;

justify-content: center;

bottom: 60px;

align-items: center;

color: rgb(50, 80, 102);

z-index: 2;

gap: 44px;

}

.icon-item {

display: flex;

align-items: center;

gap: 8px;

}

.icon-img {

width: 12px;

height: 12px;

background-size: contain;

background-repeat: no-repeat;

background-position: center;

}

.icon1 {

}

.icon2 {

}

.icon3 {

}

.icon4 {

}

.icon-text {

font-size: 12px;

}

.last-decorate {

display: flex;

z-index: 2;

position: absolute;

width: 26%;

bottom: 50px;

right: 37%;

left: 37%;

border-bottom: 3px solid #325166;

}

.center-downward {

display: grid;

position: relative;

background: rgb(255, 255, 255);

top: 21vh;

height: 4.8vh;

width: 26%;

left: 37%;

right: 37%;

z-index: 1;

}

.red-header-strip {

position: absolute;

top: 22.2vh;

left: 36.7%;

width: 45px;

height: 21px;

background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);

/* box-shadow:

2px 2px 6px rgba(0, 0, 0, 0.3),

inset -1px -1px 2px rgba(0, 0, 0, 0.3),

inset 1px 1px 2px rgba(255, 255, 255, 0.2); */

z-index: 2;

border-radius: 0 6px 0 0;

display: flex;

align-items: center;

justify-content: center;

color: white;

font-size: 10px;

font-weight: bold;

/* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); */

}

.red-header-strip::before {

content: "";

position: absolute;

bottom: -15px;

/* 向下延伸 */

left: 0;

width: 30px;

/* 向右宽度 */

height: 15px;

/* 向下高度 */

background: #8d6148;

clip-path: polygon(0 0, 20% 0, 20% 20%);

/* 向右 → 垂直向下 → 斜向左上 */

/* box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); */

/* z-index: -1; */

}

.big-title {

display: grid;

justify-items: center;

align-items: center;

z-index: 2;

font-weight: bold;

font-size: 16px;

grid-area: 1/1;

}

.downward {

display: flex;

width: 26%;

height: 15vh;

margin: 0 auto;

}

.downward-left {

flex: 0 0 58%;

}

.downward-left img {

height: 100%;

width: 100%;

object-fit: contain;

}

/* 修改右容器布局，让分页器底部对齐 */

.right-co {

flex: 1;

display: flex;

flex-direction: column;

position: relative;

/* 添加相对定位 */

min-height: 150px;

/* 确保有足够高度 */

}

/* 修正分割线样式 */

.liner {

margin-top: 4px;

width: 100%;

height: 1px;

/* 改为1px高度，原来是90px */

background: rgba(0, 0, 0, 0.1);

}

/* 如果需要调整其他元素间距，可以适当减小上边距 */

.river-news {

margin-top: 23.5px;

/* 从30px减小到15px */

font-size: 10px;

font-weight: bold;

color: white;

background: linear-gradient(to right, #1c4e8b 20%, #ffff 45%);

}

.til {

font-size: 9px;

text-align: center;

font-weight: bold;

}

.year-m {

text-align: center;

width: 60px;

font-weight: bold;

background-color: rgba(0, 0, 0, 0.1);

font-size: 6px;

}

.new-content1 {

text-indent: 2em;

margin-top: 3px;

font-size: 8px;

}

.new-content1 p {

position: relative;

/* 保持relative，但不改变display */

/* 不要写 display: inline */

}

.new-content1 p::after {

content: "...";

margin-left: 2px;

color: rgba(0, 0, 0, 0.6);

filter: blur(0.5px);

}

/* 修改分页容器定位 */

.pagination-container {

display: flex;

justify-content: space-between;

align-items: center;

gap: 10px;

width: 120px;

margin-top: auto;

/* 关键：自动上边距，推到容器底部 */

margin-left: auto;

margin-right: auto;

margin-bottom: 5px;

/* 底部留一点间距 */

}

.arrow {

position: relative;

top: 10px;

font-size: 10px;

width: 14px;

height: 14px;

background: #1c4e8b;

/* 蓝色背景 */

border-radius: 50%;

/* 圆形 */

display: flex;

align-items: center;

justify-content: center;

color: white;

font-size: 12px;

cursor: pointer;

}

.left-arrow {

margin-left: 2px;

/* 左箭头左边距 */

}

.page-info {

display: flex;

align-items: center;

gap: 2px;

}

.current-page {

font-weight: bold;

font-size: 10px;

}

.separator {

font-size: 8px;

color: #666;

}

.total-page {

font-size: 8px;

/* 比4小 */

color: rgba(0, 0, 0, 0.6);

filter: blur(0.5px);

/* 模糊化 */

}

/* 新容器样式 */

.new-section {

display: flex;

height: 55px;

width: 26%;

margin: 10px auto;

gap: 10px;

background: rgba(0, 0, 0, 0.05);

padding: 10px;

box-sizing: border-box;

min-height: 55px;

}

/* 左边通知公告 */

.notice-board {

flex: 0 0 60px;

/* 固定小宽度 */

background: #1c4e8b;

border-radius: 0 25px 0 0;

/* 只有右上角大圆角 */

display: flex;

align-items: center;

justify-content: center;

margin-top: auto;

margin-bottom: auto;

height: 40px;

/* 小高度 */

}

.notice-title {

color: white;

font-size: 10px;

/* 小字体 */

font-weight: bold;

}

/* 右边内容区域 */

.content-right {

gap: 5px;

flex: 1;

margin-top: 0px;

align-items: flex-start;

display: flex;

height: 55px;

}

/* 左右内容样式 */

.left-content,

.right-content {

gap: 4px;

flex: 1;

display: flex;

flex-direction: column;

}

.content-item {

display: flex;

align-items: center;

/* justify-content: space-between; */

width: 100%;

}

.main-text {

font-size: 7px;

white-space: nowrap;

overflow: hidden;

max-width: 100px;

position: relative;

display: inline-block;

/* 添加这个 */

padding-right: 20px;

/* 为省略号留出空间 */

}

.main-text::after {

content: "...";

color: rgba(0, 0, 0, 0.6);

filter: blur(0.5px);

position: absolute;

/* 改为绝对定位 */

right: 0;

bottom: 0;

}

.date {

font-size: 8px;

color: #666;

margin-left: 5px;

white-space: nowrap;

}

.divider-line {

width: 90%;

height: 1px;

background: rgba(0, 0, 0, 0.1);

filter: blur(0.3px);

margin: 4px 0;

}

/* 新增容器样式 */

.additional-section {

width: 26%;

margin: 10px auto;

}

.section-header {

font-size: 8px;

font-weight: bold;

color: white;

background: linear-gradient(to right, #1c4e8b 20%, #ffff 45%);

padding: 1px 3px;

width: 150px;

}

.dashed-line {

margin-top: 4px;

width: 100%;

height: 1px;

/* 改为1px高度，原来是90px */

background: rgba(0, 0, 0, 0.1);

}

/* 五部分容器样式 */

.five-parts-container {

width: 26%;

margin: 10px auto;

display: flex;

justify-content: space-between;

align-items: center;

gap: 8px;

}

.part-item {

height: 20px;

flex: 1;

background: #1c4e8b;

color: white;

font-size: 8px;

font-weight: bold;

text-align: center;

line-height: 20px;

border-radius: 4px;

position: relative;

cursor: pointer;

box-sizing: border-box;

}

.part-item.active {

background: #1c4e8b;

/* 激活状态颜色 */

}

.triangle {

position: absolute;

bottom: -6px;

left: 50%;

transform: translateX(-50%);

width: 0;

height: 0;

border-left: 4px solid transparent;

border-right: 4px solid transparent;

border-top: 6px solid #1c4e8b;

/* 三角形颜色与背景一致 */

}

/* 垂直列表容器样式 */

.vertical-list-container {

width: 26%;

margin: 8px auto;

height: 80px;

display: flex;

flex-direction: column;

justify-content: space-between;

}

.list-item {

display: flex;

justify-content: space-between;

align-items: center;

padding: 1px 0;

border-bottom: 1px solid rgba(0, 0, 0, 0.1);

/* 改为灰色透明直线 */

}

.item-content {

display: flex;

align-items: center;

flex: 1;

gap: 4px;

}

.arrow-symbol {

color: #1c4e8b;

font-weight: bold;

font-size: 10px;

}

.bracket {

color: #1c4e8b;

font-size: 8px;

font-weight: bold;

}

.content-text {

font-size: 8px;

color: #333;

flex: 1;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

.item-date {

font-size: 7px;

color: #999;

margin-left: 10px;

white-space: nowrap;

}

.new1 {

color: white;

padding: 1px 3px;

margin: 20px auto;

font-size: 8px;

background: linear-gradient(to right, #1c4e8b 3%, #ffff 15%);

width: 26%;

position: relative;

/* 为虚线定位做准备 */

}

/* 使用伪元素创建虚线，与背景保持距离 */

.new1::after {

content: "";

position: absolute;

bottom: -8px;

/* 虚线在背景下方8px */

left: 0;

width: 100%;

height: 1px;

background: rgba(0, 0, 0, 0.1);

}

/* 七部分容器样式 */

.seven-parts-container {

width: 26%;

margin: 15px auto;

display: flex;

flex-wrap: wrap;

justify-content: center;

gap: 8px;

}

.part-item-blue {

background: #e6f0ff;

border-radius: 6px;

padding: 6px 8px;

/* 减小内边距 */

text-align: center;

box-sizing: border-box;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

width: 55px;

/* 固定小宽度 */

height: 55px;

/* 固定小高度，形成正方形 */

}

.part-image {

width: 20px;

/* 减小图片尺寸 */

height: 20px;

object-fit: cover;

border-radius: 4px;

margin-bottom: 3px;

}

.part-text {

font-size: 6px;

/* 减小字体 */

color: #333;

font-weight: bold;

white-space: nowrap;

}

.new2 {

color: white;

padding: 1px 3px;

margin: 20px auto;

font-size: 8px;

background: linear-gradient(to right, #1c4e8b 3%, #ffff 15%);

width: 26%;

position: relative;

/* 为虚线定位做准备 */

}

/* 使用伪元素创建虚线，与背景保持距离 */

.new2::after {

content: "";

position: absolute;

bottom: -8px;

/* 虚线在背景下方8px */

left: 0;

width: 100%;

height: 1px;

background: rgba(0, 0, 0, 0.1);

}

/* 图片轮播容器样式 */

.image-slider-container {

width: 26%;

margin: 15px auto;

display: flex;

align-items: center;

position: relative;

height: 125px;

}

.slider-content {

width: 100%;

display: flex;

justify-content: space-between;

gap: 8px;

height: 100%;

}

.slide-image {

width: calc(33.333% - 6px);

height: 80px;

object-fit: cover;

border-radius: 8px;

}

/* 图片轮播容器样式 - 只修改箭头部分 */

.arrow-circle {

position: absolute;

background: white;

/* 白色背景 */

border: 1px solid #000;

/* 黑色边框 */

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

color: #000;

/* 黑色箭头 */

font-size: 10px;

font-weight: bold;

cursor: pointer;

z-index: 2;

width: 14px;

height: 14px;

top: 50%;

/* 垂直居中 */

transform: translateY(-50%);

/* 精确居中 */

}

.left-arrow {

margin-top: -20px;

left: -25px;

}

.right-arrow {

margin-top: -20px;

right: -25px;

}

/* 全宽容器样式 */

.full-width-container {

margin-top: -50px;

width: 100%;

background: rgba(0, 0, 0, 0.02);

padding: 8px 0;

/* 减小上下内边距 */

}

.inner-content {

width: 26%;

margin: 0 auto;

}

/* 六部分容器样式 */

.six-parts-container {

display: flex;

flex-wrap: wrap;

justify-content: space-between;

gap: 1px;

/* 减小间隔 */

margin: 6px 0;

/* 减小上下边距 */

}

.link-item {

/* flex: 0 0 calc(33.333% - 4px); */

text-align: center;

font-size: 7px;

/* 减小字体 */

color: #333;

padding: 2px 0;

/* 减小内边距 */

}

/* 底部深蓝色容器样式 */

.footer-container {

width: 100%;

height: 100%;

background: #1c4e8b;

/* 深蓝色背景 */

padding: 28px 0;

margin-top: -10px;

}

.footer-content {

width: 26%;

margin: 0 auto;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

gap: 2px;

}

.footer-text {

color: white;

font-size: 8px;

text-align: center;

}

</style>

5.运行vue

运行后网页显示

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

AI冲击下程序员大批失业，为啥做网安反而越混越吃香？

2048 AI社区

Anthropic收购Stainless：AI基础设施的釜底抽薪

2048 AI社区

【智算中心+数据中心+机房+算力】1000余份AIDC智算中心+IDC数据中心+机房建设+算力方案报告合集

AIDC智算中心作为AI时代核心基础设施，与传统IDC在芯片架构、功率密度、散热方式等方面存在显著差异。我国AIDC市场正高速增长，预计2026年达1778亿元，政策支持力度持续加大。技术层面呈现高密度集群、液冷散热、RDMA网络等发展趋势，PUE可低至1.04。产业链形成运营商主导、第三方崛起、互联网自建的三元格局，预制化算力工厂等创新模式加速落地。尽管面临能效瓶颈、供应链等挑战，AIDC正从A