Newer
Older
urbanLifeline_YanAn / src / views / index.vue
@zhangqy zhangqy on 20 Oct 7 KB 样式调整
  1. <template>
  2. <!-- 首页 -->
  3. <div class="homePage">
  4. <!-- 顶部 -->
  5. <div
  6. id="oneMapHeader"
  7. :class="[
  8. 'oneMapHeader',
  9. 'animate__animated',
  10. showPanel2 ? 'animate__fadeOutUp' : 'animate__fadeInDown',
  11. ]"
  12. >
  13. <!-- 标题 -->
  14. <div id="titleFont">延安市智慧城管</div>
  15. <!-- 标题左侧展示组件 -->
  16. <div class="Location">
  17. <el-icon size="18" style="margin-right: 5px; vertical-align: bottom"
  18. ><LocationFilled
  19. /></el-icon>
  20. 延安
  21. </div>
  22. <div class="Timer">
  23. <span class="date">{{ dates }}</span>
  24. <span class="time">{{ times }}</span>
  25. <span class="date week">{{ weeks }}</span>
  26. </div>
  27. <div class="Wather"></div>
  28. <!-- 标题右侧功能组件 -->
  29. <router-link to="/user/profile">
  30. <div class="goHome header_icon"></div>
  31. </router-link>
  32. <div class="goClose_com header_icon" @click="logout()"></div>
  33. </div>
  34. <!-- 中间内容部分 -->
  35. <div id="HomePageBody">
  36. <!-- 菜单 -->
  37. <div class="ZhuanTi ZhuanTi1" @click="ZhuanTIGO(1)">
  38. <div class="ZhuanTiName">城市生命线</div>
  39. </div>
  40. <div class="ZhuanTi ZhuanTi2" @click="ZhuanTIGO(2)">
  41. <div class="ZhuanTiName">海绵城市</div>
  42. </div>
  43. </div>
  44. <!-- 底部菜单 -->
  45. <div id="BottomMenuBox">
  46. <Transition name="slide-fade">
  47. <div v-show="AllData.BottmBackGroundShow" class="BottmBackGround"></div>
  48. </Transition>
  49. </div>
  50. </div>
  51. </template>
  52.  
  53. <script setup name="homePage">
  54. import useUserStore from "@/store/modules/user";
  55. const router = useRouter();
  56. const userStore = useUserStore();
  57. import { fullscreenToggel } from "@/utils/util";
  58. // 时间以及天气
  59. const timer = ref(null);
  60. const dates = ref(null);
  61. const weeks = ref(null);
  62. const times = ref(null);
  63. const AllData = reactive({
  64. BottmBackGroundShow: false,
  65. });
  66. const showPanel2 = ref(true);
  67. // 获取当前时间
  68. const formatTime = () => {
  69. let date = new Date();
  70. let year = date.getFullYear(); // 年
  71. let month = date.getMonth() + 1; // 月
  72. let day = date.getDate(); // 日
  73. let hour = date.getHours(); // 时
  74. hour = hour < 10 ? "0" + hour : hour; // 如果只有一位,则前面补零
  75. let minute = date.getMinutes(); // 分
  76. minute = minute < 10 ? "0" + minute : minute; // 如果只有一位,则前面补零
  77. let second = date.getSeconds(); // 秒
  78. second = second < 10 ? "0" + second : second; // 如果只有一位,则前面补零
  79. let weekAry = new Array(
  80. "星期日",
  81. "星期一",
  82. "星期二",
  83. "星期三",
  84. "星期四",
  85. "星期五",
  86. "星期六"
  87. );
  88. weeks.value = weekAry[date.getDay()];
  89. dates.value = `${year}-${month}-${day}`;
  90. times.value = `${hour}:${minute}:${second}`;
  91. };
  92. const currentTime = () => {
  93. clearInterval(timer.value);
  94. timer.value = setInterval(() => {
  95. formatTime();
  96. }, 500);
  97. };
  98. // 点击跳转专题图
  99. const ZhuanTIGO = (num) => {
  100. userStore.ZhuanTiType = num;
  101. router.push({
  102. path: "/oneMap",
  103. name: "oneMap",
  104. meta: { title: "一张图", icon: "dashboard", affix: true, noCache: true },
  105. query: { type: "FullScreen" },
  106. });
  107. };
  108. // 退出登录
  109. const logout = () => {
  110. userStore.logOut().then(() => {
  111. location.href = "/";
  112. });
  113. };
  114. onMounted(() => {
  115. fullscreenToggel();
  116. currentTime();
  117. showPanel2.value = false;
  118. AllData.BottmBackGroundShow = true;
  119. });
  120. </script>
  121.  
  122. <style scoped lang="scss">
  123. .homePage {
  124. width: 100%;
  125. height: 100vh;
  126. background: black;
  127. position: relative;
  128. background: url("@/assets/images/MenHU/bj_img@2x.png") no-repeat center;
  129. background-size: cover;
  130. // 顶部
  131. #oneMapHeader {
  132. width: 100%;
  133. height: 100px;
  134. background: url("@/assets/images/Sponge_screen/db_img.png") no-repeat center;
  135. background-size: cover;
  136. z-index: 100;
  137. position: absolute;
  138. top: 0;
  139. left: 0;
  140. #titleFont {
  141. width: 634px;
  142. height: 47px;
  143. position: absolute;
  144. left: 50%;
  145. margin-left: -317px;
  146. top: 20px;
  147. font-family: PangMenZhengDao;
  148. font-weight: 400;
  149. font-size: 38px;
  150. color: #ffffff;
  151. line-height: 35px;
  152. font-style: italic;
  153.  
  154. background: linear-gradient(0deg, aqua 0%, #ffffff 80%, #ffffff 100%);
  155.  
  156. -webkit-background-clip: text;
  157. -webkit-text-fill-color: transparent;
  158. text-align: center;
  159. letter-spacing: 15px;
  160. }
  161.  
  162. .Location {
  163. position: absolute;
  164. top: 15px;
  165. left: 20px;
  166. height: 15px;
  167. font-family: Adobe Heiti Std;
  168. font-weight: normal;
  169. font-size: 14px;
  170. color: #ffffff;
  171. line-height: 13px;
  172. font-style: italic;
  173. height: 18px;
  174. line-height: 18px;
  175. display: inline-block;
  176. }
  177. .Timer {
  178. position: absolute;
  179. top: 15px;
  180. left: 90px;
  181. height: 18px;
  182. line-height: 18px;
  183.  
  184. .time {
  185. display: inline-block;
  186. width: auto;
  187. font-family: Adobe Heiti Std;
  188. font-weight: normal;
  189. font-size: 12px;
  190. color: #ffffff;
  191. height: 18px;
  192. line-height: 18px;
  193. font-style: italic;
  194. margin: 0 10px;
  195. }
  196.  
  197. .date {
  198. display: inline-block;
  199. width: auto;
  200. font-family: Adobe Heiti Std;
  201. font-weight: normal;
  202. font-size: 12px;
  203. color: #ffffff;
  204. height: 18px;
  205. line-height: 18px;
  206. font-style: italic;
  207. }
  208. }
  209.  
  210. .header_icon {
  211. width: 22px;
  212. height: 22px;
  213. position: absolute;
  214. top: 10px;
  215. cursor: pointer;
  216. }
  217. .goHome {
  218. background: url("@/assets/images/MenHU/sz.png") no-repeat center;
  219. background-size: contain;
  220. right: 100px;
  221. }
  222. .goClose_com {
  223. background: url("@/assets/images/MenHU/tc.png") no-repeat center;
  224. background-size: contain;
  225. right: 50px;
  226. }
  227. }
  228. // 底部
  229. #BottomMenuBox {
  230. position: absolute;
  231. bottom: 0;
  232. width: 952px;
  233. height: 93px;
  234. left: 50%;
  235. margin-left: -476px;
  236. z-index: 999;
  237.  
  238. .BottmBackGround {
  239. position: absolute;
  240. bottom: 0;
  241. width: 952px;
  242. height: 53px;
  243. background: url("@/assets/images/Sponge_screen/menu/DB_img.png") no-repeat center;
  244. background-size: cover;
  245. }
  246. }
  247. // 中部内容
  248. #HomePageBody {
  249. width: 100%;
  250. height: 100%;
  251. display: flex;
  252. flex-direction: row;
  253. flex-wrap: nowrap;
  254. justify-content: center;
  255. align-items: center;
  256. .ZhuanTi {
  257. width: 316px;
  258. height: 378px;
  259. cursor: pointer;
  260. margin: 85px;
  261. position: relative;
  262. &:hover {
  263. transform: scale(1.05);
  264. box-shadow: 0px 0px 10px aqua;
  265. }
  266.  
  267. .ZhuanTiName {
  268. width: 100%;
  269. height: 40px;
  270. font-family: Source Han Sans CN;
  271. font-weight: bold;
  272. font-size: 30px;
  273. color: #ffffff;
  274. text-align: center;
  275. position: absolute;
  276. left: 0;
  277. bottom: 70px;
  278. }
  279. }
  280. .ZhuanTi1 {
  281. background: url("@/assets/images/MenHU/cssmx@2x.png") no-repeat center;
  282. background-size: cover;
  283. }
  284. .ZhuanTi2 {
  285. background: url("@/assets/images/MenHU/hmcs@2x.png") no-repeat center;
  286. background-size: cover;
  287. }
  288. }
  289. }
  290.  
  291. /*
  292. 进入和离开动画可以使用不同
  293. 持续时间和速度曲线。
  294. */
  295. .slide-fade-enter-active {
  296. transition: all 0.3s ease-out;
  297. }
  298.  
  299. .slide-fade-leave-active {
  300. transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
  301. }
  302.  
  303. .slide-fade-enter-from,
  304. .slide-fade-leave-to {
  305. transform: translateY(80px);
  306. opacity: 0;
  307. }
  308. </style>