Commit bc6a32f1 authored by “yiyousong”'s avatar “yiyousong”

feat:项目搭建

parent 7eee09c3
#基础设置
VUE_APP_API_basics_URL=http://192.168.0.98:11078/base
#门户
VUE_APP_API_portal_URL=http://192.168.0.98:11072
\ No newline at end of file
# 首页title
VUE_APP_API_BASE_title = "高新区政务服务中心"
\ No newline at end of file
......@@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>数字填单系统</title>
<title>数字样表系统</title>
</head>
<body>
<noscript>
......
......@@ -132,13 +132,22 @@ export default {
// 标题颜色
--main-title-color: #fff;
/* 辅助颜色 */
--main-assist-color: rgba(239, 87, 4, 1);
--main-assist-color1: #59d1fe;
--main-assist-color2: #f77234;
--main-assist-color3: #f53f3f;
--main-assist-color4: #58c09e;
/* 主题颜色 */
--main-theme-color: rgba(245, 44, 37, 1);
--main-theme-color1: #0857e8;
// 底部数据名称
--data-name-color: #666;
// 底部数据计数
--data-name-count: #0866e8;
// 渐变色(主色)
--gradient-ramp-theme1: #0857e8;
--gradient-ramp-theme2: #fd644f;
--gradient-ramp-theme3: #58c09e;
// 渐变色(辅色)
--gradient-ramp-assist1: #59d1fe;
--gradient-ramp-assist2: #f28e26;
--gradient-ramp-assist3: #48fca5;
}
.main-bg-img {
background: url("./assets/img/bg(1).jpg") no-repeat;
......
......@@ -62,7 +62,8 @@ export default {
width: 100%;
height: 100px;
padding: 0px 40px;
background-color: #2878ff;
background: url("../assets/img/title.jpg") no-repeat center;
box-shadow: 0px 2px 6px 6px #ccc;
.back-text {
font-size: 28px;
color: #ffffff;
......
......@@ -27,7 +27,7 @@
<div class="materals-name">
{{ v.materiaFullName }}
</div>
<div class="check-btn" @click.stop>点击查看二维码</div>
<!-- <div class="check-btn" @click.stop>点击查看二维码</div> -->
</div>
<div
class="list"
......@@ -132,7 +132,7 @@ export default {
.materals-item {
width: 19%;
margin-top: 40px;
height: 430px;
// height: 430px;
.pic-box {
width: 207px;
height: 256px;
......@@ -172,7 +172,7 @@ export default {
border-radius: 8px;
font-size: 20px;
font-family: Source Han Sans CN;
color: #0866e8;
color: var(--main-theme-color1);
text-align: center;
line-height: 50px;
cursor: pointer;
......
......@@ -52,7 +52,11 @@ export default {
.search-btn {
width: 167px;
height: 62px;
background: linear-gradient(90deg, #0866e8, #00b9fe);
background: linear-gradient(
90deg,
var(--main-theme-color1),
var(--main-assist-color1)
);
border-radius: 8px;
color: #ffffff;
font-size: 24px;
......
......@@ -231,16 +231,20 @@ export default {
.next-btn {
width: 130px;
height: 54px;
border: 1px solid #0959e8;
border: 1px solid var(--main-theme-color1);
border-radius: 8px;
font-size: 24px;
font-family: Source Han Sans CN;
color: #0958e8;
color: var(--main-theme-color1);
}
.print-btn {
width: 130px;
height: 54px;
background: linear-gradient(-90deg, #48fca5, #58c09e);
background: linear-gradient(
-90deg,
var(--gradient-ramp-assist3),
var(--gradient-ramp-theme3)
);
box-shadow: 0px 6px 12px 1px rgba(88, 193, 158, 0.2);
border-radius: 8px;
font-size: 24px;
......
......@@ -20,12 +20,18 @@
<div class="announcement-box flex1">
<div class="announcement-list flex flexwrap jcb">
<div
class="announcement-item"
class="announcement-item flex jcb"
v-for="v in 12"
:key="v"
@click="handleCheck(v)"
>
·翻建建造大修自住住房提取
<div class="flex flex1 aic">
<div class="icon"></div>
<p class="text flex1">
翻建建造大修自住住房提取翻建建造大修自住住房提取翻建建造大修自住住房提取翻建建造大修自住住房提取
</p>
</div>
<div class="time flex aic">2022-12-12 12:00:00</div>
</div>
</div>
<!-- 分页 -->
......@@ -59,6 +65,9 @@ export default {
data() {
return {
searchVal: "",
total: 20,
current: 1,
size: 12,
};
},
methods: {
......@@ -69,6 +78,9 @@ export default {
console.log(row);
this.$router.push("announcementdetails");
},
changePage(cur) {
this.current = cur;
},
},
};
</script>
......@@ -84,7 +96,7 @@ export default {
padding-left: 40px;
padding-bottom: 40px;
.data-count {
color: #ff0000;
color: var(--main-assist-color3);
}
}
.announcement-box {
......@@ -99,17 +111,33 @@ export default {
height: 80px;
margin-bottom: 30px;
padding: 0px 20px;
line-height: 80px;
background: #edf6fe;
border-radius: 8px;
font-size: 24px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #0968e8;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.icon {
width: 17px;
height: 17px;
margin-right: 10px;
background-color: var(--main-assist-color3);
transform: rotate(45deg);
}
.text {
width: 1px;
font-size: 24px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #333333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.time {
margin-left: 10px;
font-size: 24px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #999999;
}
}
/deep/.btn-prev {
margin-right: 80px;
......@@ -120,7 +148,7 @@ export default {
height: 25px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #888888;
color: var(--main-theme-color1);
line-height: 28px;
span {
font-size: 28px;
......
......@@ -12,6 +12,7 @@
<div class="announcement-name">
政务服务如何“网上办”“预约办”?全流程在这里
</div>
<p class="tac time">2022-12-12 12:00:00</p>
<div class="announcement-text flex1">
广大市民朋友:
全市各级政务服务大厅将于2020年2月3日起正常上班。为深入贯彻落实中央、省、市疫情防控工作部署,根据《关于调整省级和成都市市级政务服务大厅窗口受理办理工作的公告》,建议您以“网上办”为主、“预约办”为辅,减少往来大厅次数和外出时间,有效遏制疫情扩散和蔓延。现将有关事项通告如下:
......@@ -57,13 +58,20 @@ export default {
padding: 0px 40px;
padding-bottom: 40px;
}
.time {
margin-bottom: 25px;
font-size: 24px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #999999;
}
.announcement-name {
width: 100%;
margin: 50px 0px;
margin: 25px 0px;
font-size: 32px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #0968e8;
color: var(--main-theme-color1);
text-align: center;
}
.announcement-text {
......
......@@ -71,9 +71,9 @@ export default {
"翻建建造大修自住住房提取",
"翻建建造大修自住住房提取",
],
total: "",
current: "",
size: "",
total: 0,
current: 1,
size: 12,
};
},
methods: {
......@@ -102,7 +102,7 @@ export default {
padding-left: 40px;
padding-bottom: 40px;
.data-count {
color: #ff0000;
color: var(--main-assist-color3);
}
}
.guidance-box {
......@@ -123,7 +123,7 @@ export default {
font-size: 24px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #0968e8;
color: var(--main-theme-color1);
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
......@@ -138,7 +138,7 @@ export default {
height: 25px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #888888;
color: var(--main-theme-color1);
line-height: 28px;
span {
font-size: 28px;
......
......@@ -66,7 +66,7 @@ export default {
font-size: 32px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #0968e8;
color: var(--main-theme-color1);
text-align: center;
}
.guidance-text {
......
......@@ -9,7 +9,7 @@
src="../../assets/img/png_huizhang.png"
alt="LOGO"
/>
<h1 class="title ml10">高新区政务服务中心</h1>
<h1 class="title ml10">{{ baseTitle }}</h1>
</div>
<div class="right flex">
<p class="flex aic mr25">
......@@ -138,10 +138,15 @@
</div>
</div>
<!-- 导航 -->
<div class="nav flex flexc jcb aic">
<div class="nav-top flex aic jcb">
<div class="nav flex flexc aic">
<div class="nav-top flex aic jcb mb15">
<router-link to="/matterList">
<div class="fill-btn flex aic jcc pointer">快速填单</div>
<div class="fill-btn flex aic jcc pointer">
<span class="fill-btn-text1"></span>
<span class="fill-btn-text2"></span>
<span class="fill-btn-text3"></span>
<span class="fill-btn-text4"></span>
</div>
</router-link>
<router-link to="/Print">
<div class="empty-btn flex aic jcc pointer">打印空白材料</div>
......@@ -232,6 +237,7 @@ export default {
top2: require("../../assets/img/png_no.2.png"),
top3: require("../../assets/img/png_no.3.png"),
homeInfo: {}, // 首页数据
baseTitle: process.env.VUE_APP_API_BASE_title,
};
},
computed: {
......@@ -308,13 +314,28 @@ export default {
}
@keyframes shadow {
0% {
transform: translateX(0);
opacity: 1;
left: -200px;
}
10% {
transform: translateX(11em);
opacity: 0;
left: 400px;
}
100% {
transform: translateX(11em);
opacity: 0;
left: 400px;
}
}
@keyframes ring {
0% {
transform: translateY(0px);
}
10% {
transform: translateY(-30px);
}
60%,
100% {
transform: translateY(0px);
}
}
.home {
......@@ -400,7 +421,11 @@ export default {
.search-btn {
width: 167px;
height: 62px;
background: linear-gradient(90deg, #0866e8, #00b9fe);
background: linear-gradient(
90deg,
var(--main-theme-color1),
var(--main-assist-color1)
);
border-radius: 8px;
color: #ffffff;
font-size: 24px;
......@@ -460,7 +485,7 @@ export default {
line-height: 56px;
border-radius: 8px;
font-size: 22px;
color: #0866e8;
color: var(--main-theme-color1);
&:nth-child(2n-1) {
background-color: #fff;
}
......@@ -472,7 +497,7 @@ export default {
}
.nav {
width: 700px;
height: 410px;
height: 425px;
.fill-btn {
width: 427px;
height: 212px;
......@@ -482,24 +507,22 @@ export default {
color: #ffffff;
position: relative;
overflow: hidden;
// &::before {
// content: "";
// position: absolute;
// left: -4em;
// width: 4em;
// height: 96%;
// top: 2%;
// transition: transform 0.4s ease-in-out;
// background: linear-gradient(
// to right,
// transparent 1%,
// rgba(255, 255, 255, 0.1) 40%,
// rgba(255, 255, 255, 0.5) 60%,
// transparent 100%
// );
// animation: shadow 4000ms infinite;
// }
// overflow: hidden;
&::before {
content: "";
position: absolute;
width: 200px;
height: 300%;
left: -200px;
transform: rotateZ(-45deg);
background: linear-gradient(
to right,
transparent 1%,
rgba(255, 255, 255, 0.2) 30%,
rgba(255, 255, 255, 0.5) 60%,
transparent 100%
);
animation: shadow 6s infinite;
}
// &::after {
// content: "";
// display: inline-block;
......@@ -514,6 +537,18 @@ export default {
// position: absolute;
// left: -200px;
// }
.fill-btn-text1 {
animation: ring 6s 20ms infinite;
}
.fill-btn-text2 {
animation: ring 6s 60ms infinite;
}
.fill-btn-text3 {
animation: ring 6s 105ms infinite;
}
.fill-btn-text4 {
animation: ring 6s 145ms infinite;
}
}
.empty-btn {
width: 284px;
......@@ -556,11 +591,11 @@ export default {
margin: 0px;
padding: 0px;
font-size: 24px;
color: var(--data-name-count);
color: var(--main-theme-color1);
.data-count {
font-size: 38px;
font-family: Source Han Sans CN;
color: var(--data-name-count);
color: var(--main-theme-color1);
}
}
.line {
......@@ -569,8 +604,8 @@ export default {
background-image: linear-gradient(
to bottom,
#ccc,
var(--data-name-count) 35%,
var(--data-name-count) 75%,
var(--main-theme-color1) 35%,
var(--main-theme-color1) 75%,
#ccc 100%
);
}
......
......@@ -217,7 +217,7 @@ export default {
border-radius: 8px;
font-size: 24px;
font-family: Source Han Sans CN;
color: #0968e8;
color: var(--main-theme-color1);
}
}
.tips {
......@@ -264,7 +264,11 @@ export default {
.search-btn {
width: 162px;
height: 60px;
background: linear-gradient(-90deg, #0866e8, #00b9fe);
background: linear-gradient(
-90deg,
var(--main-assist-color1),
var(--main-theme-color1)
);
border-radius: 8px;
font-size: 24px;
font-family: Source Han Sans CN;
......
......@@ -23,12 +23,18 @@
<div class="suggest-box flex1">
<div class="suggest-list flex flexwrap jcb" v-if="list.length">
<div
class="suggest-item"
class="suggest-item flex jcb"
v-for="(v, i) in list"
:key="i"
@click="handleCheck(v)"
>
·{{ v }}
<div class="flex flex1 aic">
<div class="icon"></div>
<p class="text flex1">
{{ v }}
</p>
</div>
<div class="time flex aic">2022-12-12 12:00:00</div>
</div>
</div>
<el-empty :image-size="200" v-else></el-empty>
......@@ -103,7 +109,11 @@ export default {
.search-btn {
width: 193px;
height: 72px;
background: linear-gradient(-90deg, #0866e8, #00b9fe);
background: linear-gradient(
-90deg,
var(--main-assist-color1),
var(--main-theme-color1)
);
border-radius: 8px;
font-size: 24px;
font-family: Source Han Sans CN;
......@@ -114,7 +124,7 @@ export default {
padding-left: 40px;
padding-bottom: 40px;
.data-count {
color: #ff0000;
color: var(--main-assist-color3);
}
}
.suggest-box {
......@@ -132,14 +142,31 @@ export default {
line-height: 80px;
background: #edf6fe;
border-radius: 8px;
font-size: 24px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #0968e8;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.icon {
width: 17px;
height: 17px;
margin-right: 10px;
background-color: var(--main-assist-color3);
transform: rotate(45deg);
}
.text {
width: 1px;
font-size: 24px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #333333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.time {
margin-left: 10px;
font-size: 24px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #999999;
}
}
/deep/.btn-prev {
margin-right: 80px;
......@@ -150,7 +177,7 @@ export default {
height: 25px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #888888;
color: var(--main-theme-color1);
line-height: 28px;
span {
font-size: 28px;
......
......@@ -99,7 +99,7 @@ export default {
}
.suggest-item-title {
font-family: Source Han Sans CN;
color: #0968e8;
color: var(--main-theme-color1);
}
.suggest-item-text {
line-height: 34px;
......@@ -123,7 +123,7 @@ export default {
width: 88px;
height: 44px;
margin-bottom: 20px;
background: #0968e8;
background: var(--main-theme-color1);
border-radius: 8px;
color: #fff;
text-align: center;
......
......@@ -292,7 +292,7 @@ export default {
font-size: 18px;
line-height: 28px;
font-family: Source Han Sans CN;
color: #0857e8;
color: var(--main-theme-color1);
}
.matter-name,
.materails-item {
......@@ -304,14 +304,18 @@ export default {
color: #333333;
}
.active {
color: #0857e8;
border-color: #0857e8;
color: var(--main-theme-color1);
border-color: var(--main-theme-color1);
}
.sidebar-btn {
width: 84px;
height: 276px;
background: linear-gradient(90deg, #0857e8, #59d1fe);
background: linear-gradient(
90deg,
var(--main-theme-color1),
var(--main-assist-color1)
);
box-shadow: 6px -1px 10px 0px rgba(11, 92, 233, 0.11);
border-radius: 0px 38px 8px 0px;
font-size: 24px;
......@@ -343,7 +347,11 @@ export default {
.print-btn {
width: 211px;
height: 54px;
background: linear-gradient(90deg, #fd644f, #f28e26);
background: linear-gradient(
90deg,
var(--gradient-ramp-theme2),
var(--gradient-ramp-assist2)
);
box-shadow: 0px 6px 12px 1px rgba(253, 100, 79, 0.2);
border-radius: 8px;
font-size: 24px;
......@@ -376,7 +384,7 @@ export default {
text-overflow: ellipsis;
white-space: nowrap;
.count {
color: #0857e8;
color: var(--main-theme-color1);
}
}
.footer-btn {
......@@ -390,11 +398,11 @@ export default {
.preview-btn {
width: 130px;
height: 54px;
border: 1px solid #58c29e;
border: 1px solid var(--main-assist-color4);
border-radius: 8px;
font-size: 24px;
font-family: Source Han Sans CN;
color: #58c19e;
color: var(--main-assist-color4);
}
}
......@@ -406,16 +414,20 @@ export default {
.next-btn {
width: 130px;
height: 54px;
border: 1px solid #0959e8;
border: 1px solid var(--main-theme-color1);
border-radius: 8px;
font-size: 24px;
font-family: Source Han Sans CN;
color: #0958e8;
color: var(--main-theme-color1);
}
.print-btn {
width: 130px;
height: 54px;
background: linear-gradient(-90deg, #48fca5, #58c09e);
background: linear-gradient(
-90deg,
var(--gradient-ramp-assist3),
var(--gradient-ramp-theme3)
);
box-shadow: 0px 6px 12px 1px rgba(88, 193, 158, 0.2);
border-radius: 8px;
font-size: 24px;
......@@ -425,7 +437,11 @@ export default {
.sub-btn {
width: 130px;
height: 54px;
background: linear-gradient(90deg, #0857e8, #59d1fe);
background: linear-gradient(
90deg,
var(--main-theme-color1),
var(--main-assist-color1)
);
box-shadow: 3px 5px 12px 1px rgba(11, 91, 233, 0.2);
border-radius: 8px;
font-size: 24px;
......
......@@ -8,7 +8,10 @@
:key="v.id"
@click="changeDept(v.id, i)"
>
{{ v.deptAbb ? v.deptAbb : v.name }}
<div class="dept-name">
{{ v.deptAbb ? v.deptAbb : v.name }}
</div>
<div class="line"></div>
</div>
</div>
</div>
......@@ -62,10 +65,24 @@ export default {
line-height: 70px;
color: #333333;
cursor: pointer;
border-bottom: 1px solid #e1e1e1;
.dept-name {
padding: 0px 6px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.line {
height: 1px;
width: 100%;
background-image: linear-gradient(to right, #fff, #ccc 50%, #fff);
}
.active {
background: linear-gradient(270deg, #59e6fe, #0866e8);
background: linear-gradient(
270deg,
var(--main-assist-color1),
var(--main-theme-color1)
);
font-family: Source Han Sans CN;
color: #ffffff;
}
......
......@@ -183,12 +183,13 @@ export default {
.main {
width: 100%;
height: 100%;
margin-top: 10px;
.right {
height: 100%;
padding: 0px 40px;
padding-bottom: 40px;
.data-count {
color: #ff0000;
color: var(--main-assist-color3);
}
}
.matter-box {
......@@ -247,18 +248,18 @@ export default {
/deep/.btn-prev {
margin-right: 80px;
}
/deep/.btn-prev,
/deep/ .btn-next {
width: 78px;
height: 25px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #888888;
line-height: 28px;
span {
font-size: 28px;
}
}
}
}
/deep/.btn-prev,
/deep/ .btn-next {
width: 78px;
height: 25px;
font-family: Source Han Sans CN;
font-weight: 400;
color: var(--main-theme-color1);
line-height: 28px;
span {
font-size: 28px;
}
}
</style>
\ No newline at end of file
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