officialblock 1.0.7 → 1.0.8

package/src/components/BannerPage/index.vue

@@ -0,0 +1,283 @@
+<template>
+  <div class="banner-page" @mouseenter="isHover = true" @mouseleave="isHover = false">
+    <div class="red">
+      <p class="banner-page__title">{{ modelValue?.data?.title }}</p>
+    </div> 
+    <div class="orange"></div> 
+    <div class="position-absolute triangle-position">
+      <div class="position-relative h-100 banner-strips">
+        <img src="https://ywies-tx.cedim.cn/images/material/banner-strips.png" alt=""> 
+        <div class="triangle" :style="{backgroundImage: 'url(' + modelValue?.data?.imgSrc + ')'}" data-v-24231ec2=""></div>
+      </div>
+    </div>
+
+    <Operate v-if="!modelValue?.readOnly" v-model:show="isHover" @handle-edit="showSetting = true" @handle-delete="handleDelete" @handle-copy="handleCopy"></Operate>
+  </div>
+
+  <Setting v-model:show="showSetting" :data="modelValue"></Setting>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { randomString } from '@/utils/common'
+import Operate from '@/components/Operate/index.vue'
+import Setting from './setting.vue'
+
+// 定义组件名称
+defineOptions({
+  name: 'BannerPage'
+})
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => {}
+  },
+
+  // 是否预览
+  isPreview: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'handleDelete', 'handleCopy'])
+
+const handleInit = () => {
+  if (props.modelValue && props.modelValue.data) return // 有数据不用初始化
+  const data = {
+    id: props.modelValue?.id || randomString(),
+    type: 'BannerPage',
+    readOnly: props.modelValue?.readOnly || false,
+    data: {
+      title: '冷风机奥附件哦啊金佛阿吉佛大金佛电极法对哦就对哦就发哦就发哦激发激发哦飞机奥飞机',
+      imgSrc: 'https://osswebsite.ycyw.com/media-library/ywies-bj/images/home/ywies-tx.jpg',
+    }
+  }
+  emit('update:modelValue', data)
+} 
+
+const isHover = ref<boolean>(false);
+const showSetting = ref<boolean>(false);
+
+const handleDelete = () => {
+  emit('handleDelete', props.modelValue.id)
+}
+
+const handleCopy = () => {
+  emit('handleCopy', props.modelValue)
+}
+
+handleInit()
+</script>
+
+<style scoped>
+.banner-page {
+  height: 328px;
+  width: 100%;
+  display: flex;
+  position: relative;
+  justify-content: space-between;
+  overflow: hidden;
+}
+
+@media (max-width: 575.98px) {
+  .banner-page {
+    height: 160px;
+  }
+}
+
+.banner-page__title {
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1.15;
+  text-shadow: 0 8px 32px 0 rgba(130,130,140,.24);
+  color: #fff;
+  max-width: 357px;
+  margin-left: 60px;
+  z-index: 1;
+}
+
+@media (min-width: 768px) {
+  .banner-page__title {
+    font-size: 36px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .banner-page__title {
+    font-size: 40px;
+    line-height: 1.25;
+  }
+}
+
+@media (max-width: 1023.98px) {
+  .banner-page__title {
+    margin-left: 40px;
+    width: 50%;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .banner-page__title {
+    margin-left: 22px;
+  }
+}
+
+.banner-page .red {
+  height: 100%;
+  width: 50%;
+  background-image: url('https://ywies-tx.cedim.cn/_nuxt/img/header-left-banner.c745bf5.jpg');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: 50%;
+  display: flex;
+  align-items: center;
+}
+
+.banner-page .red:after {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  background-color: rgba(235,0,40,.6);
+}
+
+@media (max-width: 767.98px) {
+  .banner-page .red {
+    width: 65%;
+  }
+}
+
+.banner-page .orange {
+  width: 50%;
+  background-image: url('https://ywies-tx.cedim.cn/_nuxt/img/header-right-banner.6a0f5b9.jpg');
+  background-position: 50%;
+  position: relative;
+}
+
+.banner-page .orange,
+.banner-page .orange:after {
+  height: 100%;
+  background-repeat: no-repeat;
+  background-size: 100%;
+}
+
+.banner-page .orange:after {
+  position: absolute;
+  content: "";
+  width: 100%;
+  background-color: rgba(255,158,24,.6);
+}
+
+@media (max-width: 1440px) {
+  .banner-page .orange {
+    background-size: cover;
+    background-position: 220px 50%;
+  }
+}
+
+@media (max-width: 992px) {
+  .banner-page .orange {
+    background-position: 180px 50%;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .banner-page .orange {
+    width: 35%;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .banner-page .orange {
+    background-position: 18px 50%;
+  }
+}
+
+.banner-page .triangle-position {
+  position: absolute;
+  top: 0;
+  left: 66%;
+  width: 100%;
+  height: 100%;
+  transform: translateX(-50%);
+  max-width: 693px;
+}
+
+@media (min-width: 1441px) {
+  .banner-page .triangle-position {
+    left: 50%;
+  }
+}
+
+.banner-page .banner-strips img {
+  position: absolute;
+  height: 100%;
+  z-index: 1;
+  right: 77%;
+}
+
+@media (max-width: 1023.98px) {
+  .banner-page .banner-strips img {
+    right: 65%;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .banner-page .banner-strips img {
+    right: 50%;
+  }
+}
+
+@media (max-width: 375px) {
+  .banner-page .banner-strips img {
+    right: 49%;
+  }
+}
+
+.banner-page .triangle {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  max-width: 700px;
+  transform: translateX(-50%);
+  background-position: 50%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-image: var(--bg-image);
+  -webkit-clip-path: polygon(0 0,100% 0,80% 100%,20% 100%);
+  clip-path: polygon(0 0,100% 0,80% 100%,20% 100%);
+}
+
+@media (max-width: 1023.98px) {
+  .banner-page .triangle {
+    max-width: 600px;
+    left: 53%;
+    -webkit-clip-path: polygon(0 0,100% 0,72% 100%,25% 100%);
+    clip-path: polygon(0 0,100% 0,72% 100%,25% 100%);
+  }
+}
+
+@media (max-width: 767.98px) {
+  .banner-page .triangle {
+    max-width: 450px;
+    left: 60%;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .banner-page .triangle {
+    max-width: 225px;
+    left: 56%;
+  }
+}
+
+.banner-page .triangle img {
+  position: absolute;
+}
+</style>

package/src/components/BannerPage/setting.vue

@@ -0,0 +1,55 @@
+<template>
+  <a-drawer :width="500" :visible="show" :footer="false" @cancel="handleCancel" unmountOnClose>
+    <template #title>
+      {{data.type}}组件编辑
+    </template>
+    <div class="setting-content">
+      <p class="item-title">标题</p>
+      <a-input v-model="data.data.title" placeholder="请输入标题" allow-clear />
+
+      <p class="item-title">图片</p>
+      <img class="item-img" :src="data?.data?.imgSrc" />
+      <div class="item-uplaod flex items-center">
+        <a-input v-model="data.data.imgSrc" placeholder="请输入图片链接" allow-clear />
+        <a-upload class="fit-content" :show-file-list="false" action="/" />
+      </div>
+    </div>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+
+  data: {
+    type: Object,
+    default: () => {}
+  }
+})
+
+const emit = defineEmits(['update:show']);
+
+const handleCancel = () => {
+  emit('update:show', false);
+}
+</script>
+
+<style lang="scss" scoped>
+.setting-content {
+  position: relative;
+
+  .item-title {
+    padding: 12px 0 8px 0;
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  .item-img {
+    margin-top: 12px;
+    height: 160px;
+  }
+}
+</style>

package/src/components/BannerPage/type.ts

@@ -0,0 +1,10 @@
+export interface BannerPageProps {
+  /** 双向绑定的值 */
+  modelValue: any
+}
+
+export interface BannerPageEmits {
+  (e: 'update:modelValue', value: any): void
+  (e: 'handleDelete', value: string | number): void
+  (e: 'handleCopy', value: any): void
+}

package/src/components/BtnList/index.ts

@@ -0,0 +1,11 @@
+import type { App, Plugin } from 'vue'
+import BtnList from './index.vue'
+
+export default {
+  install: (app: App) => {
+    app.component('BtnList', BtnList)
+  },
+} satisfies Plugin
+
+export { default as BtnList } from './index.vue'
+export type { BtnListProps, BtnListEmits } from './type'