Skip to content

GitLab

Commit 43699cf7 authored by 吕 成东's avatar 吕 成东
Browse files

修改样式

parent fd4cb4e8
Hide whitespace changes
Inline Side-by-side
index.html
View file @ 43699cf7
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>合肥英泽信息科技有限公司</title>
<link rel="shortcut icon" href="/inzy_log.png" type="image/png">
<link rel="shortcut icon" href="/inzy_log.png" type="image/png" />
</head>
<body>
<div id="app"></div>
......
src/components/Header.vue
View file @ 43699cf7
......@@ -20,6 +20,7 @@ const navItems = [
]
const handleNavClick = (path: string) => {
return
router.push(path)
}
......@@ -48,12 +49,8 @@ onMounted(() => {
<div class="center-width header-top">
<i class="logo"></i>
<ul class="navigation">
<li
v-for="item in navItems"
:key="item.path"
:class="{ active: route.path === item.path }"
@click="handleNavClick(item.path)"
>
<li v-for="item in navItems" :key="item.path" :class="{ active: route.path === item.path }"
@click="handleNavClick(item.path)">
{{ item.name }}
</li>
</ul>
......@@ -62,10 +59,12 @@ onMounted(() => {
<div id="swiper-container" class="swiper-container use-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../assets/images/banner_one.png" alt="">
<!-- <img src="../assets/images/banner_one.png" alt=""> -->
<img src="../assets/images/banner_1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="../assets/images/banner_one.png" alt="">
<!-- <img src="../assets/images/banner_one.png" alt=""> -->
<img src="../assets/images/banner_2.jpg" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
......@@ -87,5 +86,15 @@ onMounted(() => {
.navigation li {
cursor: pointer;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
}
</style>
\ No newline at end of file
.navigation li:hover {
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}
.navigation li.active {
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}
</style>
\ No newline at end of file
src/components/Service.vue
View file @ 43699cf7
......@@ -12,7 +12,11 @@ const services = [
<div class="serve">
<div class="center-width serve-main">
<div class="left">
<div class="title"></div>
<div class="title serve-title">
<div class="index">01</div>
<div class="name">信息技术服务</div>
<div class="english">INFORMATION TECHNOLOGY SERVICE</div>
</div>
<div class="img"></div>
</div>
<div class="right">
......@@ -35,4 +39,6 @@ const services = [
.serve {
width: 100%;
}
</style>
\ No newline at end of file
</style>
\ No newline at end of file
src/components/Solution.vue
View file @ 43699cf7
......@@ -18,7 +18,12 @@ const products = [
<template>
<div class="blue-print">
<div class="center-width print-main">
<div class="title"></div>
<!-- <div class="title"></div> -->
<div class="title serve-title">
<div class="index">02</div>
<div class="name">产品解决方案</div>
<div class="english">PRODUCT SOLUTIONS</div>
</div>
<div class="product">
<div class="left">依托在通信、金融、汽车制造、政府及公共事业等领域的长期积累 、以客户为核心延伸IT服务价值，由个性化向整体化迈进。</div>
<div class="right plan">
......@@ -51,4 +56,4 @@ const products = [
.blue-print {
width: 100%;
}
</style>
\ No newline at end of file
</style>
\ No newline at end of file
src/styles/style.css
View file @ 43699cf7
......@@ -92,7 +92,29 @@ body {
.serve-main .left .title {
width: 367px;
height: 86px;
background: url("@/assets/images/serve_lefttop.png") 0 0 no-repeat;
/* background: url("@/assets/images/serve_lefttop.png") 0 0 no-repeat; */
}
.serve-title {
.index {
font-size: 65px;
line-height: 48px;
font-weight: bold;
letter-spacing: 3px;
color: #d9e6f6;
}
.name {
font-size: 28px;
font-weight: bold;
letter-spacing: 7px;
margin-top: -23px;
}
.english {
letter-spacing: 2.8px;
font-weight: bold;
width: 100%;
}
}
.serve-main .left .img {
width: 306px;
......@@ -303,7 +325,7 @@ body {
.print-main > .title {
width: 212px;
height: 86px;
background: url("@/assets/images/icon_title_three.png") 0 0 no-repeat;
/* background: url("@/assets/images/icon_title_three.png") 0 0 no-repeat; */
}
.product {
margin-top: 30px;
......@@ -518,6 +540,11 @@ body {
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
> img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.use-swiper .swiper-pagination-bullet {
width: 55px;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment