卡片组件

ruoyi-ui/src/assets/styles/picture-common.scss

@@ -0,0 +1,67 @@
+@import './picture-variables.scss';
+
+/* 屏幕基准 */
+.p-font-rule {
+  font-size: 1px;
+}
+
+.p-font-large {
+  font-size: 2px;
+}
+
+/* 数字字体引入 */
+@font-face {
+  font-family: DINAlternate;
+  src: url('~@/assets/styles/fonts/DIN Alternate Bold.ttf');
+}
+/* 标题字体引入 */
+@font-face {
+  font-family: YouSheBiaoTiHei;
+  src: url('~@/assets/styles/fonts/YouSheBiaoTiHei.ttf');
+}
+
+*,
+*::before,
+*::after {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  font-size: 16rem;
+  font-weight: 400;
+  line-height: 1.5;
+  text-align: left;
+}
+/* 页面主体 */
+.p-pages-main {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 9;
+  width: 100vw;
+  height: 100vh;
+}
+/* 页面地图 */
+.p-pages-map {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 9;
+  width: 100vw;
+  height: 100vh;
+}
+/* 地图引入盒子 */
+.amap-container {
+  position: absolute;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  background-image: url(~@/assets/test-images/drawing-map.jpg) !important;
+  background-size: cover;
+  z-index: auto;
+}

ruoyi-ui/src/assets/styles/picture-variables.scss

@@ -0,0 +1,33 @@
+/* 公共 间隔初始化 */
+$p-spacer-mini: 6rem;
+$p-spacer-small: 12rem;
+$p-spacer-medium: 16rem;
+$p-spacer-large: 20rem;
+$p-spacer-super: 30rem;
+
+$p-spacer-inner: 20rem;
+$p-spacer-outer: 20rem;
+
+/* 公共 文字大小 */
+$p-font-mini: 12rem;
+$p-font-small: 14rem;
+$p-font-medium: 16rem;
+$p-font-large: 20rem;
+$p-font-super: 24rem;
+
+/* 公共 圆角 */
+$p-radius-mini: 6rem;
+$p-radius-small: 10rem;
+$p-radius-medium: 15rem;
+$p-radius-large: 20rem;
+$p-radius-super: 30rem;
+
+/* 页面 标题 */
+$p-card-title-size:22rem;
+$p-card-title-height:32rem;
+$p-card-body-bg:#001621;
+$p-card-body-opacity:.8;
+
+
+/* 页面 主题色 */
+$p-primary-color: #42e983;

ruoyi-ui/src/components/p-card/BaseCard.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="p-card"><slot></slot></div>
+</template>
+
+<script>
+export default {
+  name: "BaseCard",
+};
+</script>
+
+<style scoped lang="scss">
+@import './src/assets/styles/picture-variables';
+
+.p-card {
+  height: 100%;
+  background: rgba($p-card-body-bg, $p-card-body-opacity);
+  border-left: 1px solid rgba($p-card-body-bg, $p-card-body-opacity);
+}
+</style>

ruoyi-ui/src/components/p-card/BaseCardBody.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="p-card-body">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BaseCardBody",
+};
+</script>
+
+<style lang="scss">
+@import './src/assets/styles/picture-variables';
+.p-card-body {
+  padding: $p-spacer-inner;
+}
+</style>

ruoyi-ui/src/components/p-card/BaseCardTitle.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="p-card-title">
+    <div class="p-card-title-inner">
+      <span class="p-card-title-text">{{ title }}</span>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BaseCardTitle.vue",
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import './src/assets/styles/picture-variables';
+
+.p-card-title {
+  padding: 0 $p-spacer-inner;
+}
+
+.p-card-title-inner {
+  position: relative;
+  height: $p-card-title-height;
+  padding-left: 50rem;
+  background-image: url(~@/assets/images/p_tittle_middle.svg) !important;
+  background-repeat: no-repeat;
+  background-position: 24rem top;
+  background-size: contain;
+}
+
+.p-card-title-text {
+  position: relative;
+  z-index: 9;
+  font-size: $p-card-title-size;
+  font-family: YouSheBiaoTiHei;
+  color: transparent;
+  background-image: linear-gradient(to bottom, #fff 40%, $p-primary-color);
+  background-clip: text;
+}
+
+.p-card-title-inner:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: $p-card-title-height;
+  height: $p-card-title-height;
+  background-image: url(~@/assets/images/p_tittle_left.svg) !important;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 70%;
+}
+
+.p-card-title-inner:after {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 50rem;
+  height: $p-card-title-height;
+  background-image: url(~@/assets/images/p_title_right.svg) !important;
+  background-repeat: no-repeat;
+  background-position: 0 bottom;
+  background-size: contain;
+}
+</style>