officialblock 1.0.7 → 1.0.9

package/src/components/ContactUsList/index.vue

@@ -0,0 +1,369 @@
+<template>
+  <div
+    style="margin-top: 30px; margin-bottom: 30px"
+    class="count-down-container"
+    :style="{ backgroundColor: modelValue?.bgColor }"
+    @mouseenter="isHover = true"
+    @mouseleave="isHover = false"
+  >
+    <!-- <a-row
+      class="count_down"
+      :class="[
+        modelValue?.width
+          ? `container-content-${modelValue?.width}`
+          : 'container-content',
+      ]"
+    > -->
+    <div class="count-down">
+      <div class="contact-us-list">
+        <div>
+          <ul class="contact-us-list__list">
+            <a-row style="display: flex">
+              <a-col
+                :sm="{ span: modelValue?.columns === 2 ? 12 : 24 }"
+                :md="{ span: modelValue?.columns === 2 ? 12 : 24 }"
+                :lg="{ span: modelValue?.columns === 2 ? 12 : 24 }"
+                :xl="{ span: modelValue?.columns === 2 ? 12 : 24 }"
+                v-for="item in modelValue?.data"
+                style="margin-top: 16px"
+              >
+                <li class="contact-us-list__item">
+                  <h6 class="contact-us-list__item__name">{{ item.name }}</h6>
+                  <p class="contact-us-list__item__title">{{ item.title }}</p>
+                  <div class="contact-us-list__item__region">
+                    {{ item.region }}
+                  </div>
+                  <div class="contact-us-list__item__link">
+                    <div class="icon-link icon-link--md">
+                      <a
+                        href="mailto:111"
+                        target="_blank"
+                        class="icon-link__wrapper"
+                        ><span
+                          class="icon-link__icon"
+                          :style="{ '--icon-url': `url(${iconEmailUrl})` }"
+                        ></span>
+                        <div class="icon-link__text">
+                          <span>{{ item.link }}</span>
+                        </div></a
+                      >
+                    </div>
+                  </div>
+                </li>
+              </a-col>
+            </a-row>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <!-- 左侧文本 后侧媒体 -->
+    <!-- 左侧一直是一半，但只有左侧时是100% -->
+    <!-- <a-col :sm="{ span: 24 }" :md="{ span: hasMedia ? 12 : 24 }"> </a-col>
+      <a-col v-if="hasMedia" :sm="{ span: 24 }" :md="{ span: 12 }"> </a-col> -->
+    <!--  -->
+    <Operate
+      v-if="!modelValue?.readOnly"
+      v-model:show="isHover"
+      @handle-edit="showSetting = true"
+      @handle-delete="handleDelete"
+      @handle-copy="handleCopy"
+    ></Operate>
+    <!-- </a-row> -->
+  </div>
+
+  <Setting v-model:show="showSetting" :data="modelValue"></Setting>
+</template>
+
+<script lang="ts" setup>
+import { computed, nextTick, ref } from "vue";
+import { randomString } from "@/utils/common";
+import Setting from "./setting.vue";
+import Operate from "@/components/Operate/index.vue";
+import iconEmailUrl from "@/assets/icon-email.svg";
+
+// 定义组件名称
+defineOptions({
+  name: "CountDown",
+});
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => {},
+  },
+
+  // 是否预览
+  isPreview: {
+    type: Boolean,
+    default: false,
+  },
+});
+console.log("!!!!", props.modelValue);
+const emit = defineEmits(["update:modelValue", "handleDelete", "handleCopy"]);
+
+const isHover = ref<boolean>(false);
+const showSetting = ref<boolean>(false);
+
+const handleDelete = () => {
+  emit("handleDelete", props.modelValue.id);
+};
+
+const handleCopy = () => {
+  emit("handleCopy", props.modelValue);
+};
+
+const handleInit = () => {
+  if (props.modelValue && props.modelValue.data) return; // 有数据不用初始化
+  const data = {
+    id: props.modelValue?.id || randomString(),
+    type: "CountDown",
+    readOnly: props.modelValue?.readOnly || false,
+    columns: 2,
+    data: [
+      {
+        name: "New Contact111",
+        title: "title1111",
+        region: "region111",
+        link: "111@qq.com",
+        id: randomString(),
+      },
+      {
+        name: "New Contact111222",
+        title: "title12222",
+        region: "region111",
+        link: "111@qq.com",
+        id: randomString(),
+      },
+      {
+        name: "New Contac33333",
+        title: "title3333",
+        region: "region33333",
+        link: "111@qq.com",
+        id: randomString(),
+      },
+    ],
+  };
+  emit("update:modelValue", data);
+};
+
+handleInit();
+</script>
+
+<style lang="scss" scoped>
+.count-down {
+  position: relative;
+}
+.count-down-container {
+  text-align: center;
+  display: block;
+  position: relative;
+}
+
+.contact-us-list__list {
+  --bs-gutter-y: 36px;
+}
+
+@media (max-width: 1023.98px) {
+  .contact-us-list__list {
+    --bs-gutter-y: 24px;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .contact-us-list__list {
+    --bs-gutter-y: 16px;
+  }
+}
+.contact-us-list__item {
+  text-align: left;
+}
+
+.contact-us-list__item__name {
+  color: #0032a0;
+}
+
+.contact-us-list__item__title {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.428;
+  color: #2a3b4d;
+  margin-top: 4px;
+}
+
+@media (max-width: 1023.98px) {
+  .contact-us-list__item__title {
+    line-height: 1.285;
+    letter-spacing: 0.03em;
+    font-weight: 400;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .contact-us-list__item__title {
+    font-size: 13px;
+    line-height: 1.33;
+    letter-spacing: 0.02em;
+  }
+}
+
+@media (min-width: 768px) {
+  .contact-us-list__item__title {
+    max-width: 240px;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .contact-us-list__item__title {
+    margin-top: 2px;
+  }
+}
+
+.contact-us-list__item__region {
+  margin-top: 4px;
+  font-size: 14px;
+  font-weight: 300;
+  line-height: 1.214;
+  color: #2a3b4d;
+}
+
+@media (max-width: 1023.98px) {
+  .contact-us-list__item__region {
+    font-size: 13px;
+    line-height: 1;
+    letter-spacing: 0.04em;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .contact-us-list__item__region {
+    line-height: 1.33;
+  }
+}
+
+.contact-us-list__item__link {
+  margin-top: 4px;
+}
+
+.icon-link {
+  display: flex;
+}
+
+.icon-link__wrapper {
+  border: none;
+  background: none;
+  color: #0032a0;
+  color: var(--text-color--primary, #0032a0);
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  padding: 0;
+}
+
+.icon-link__wrapper:hover .icon-link__text span {
+  background-size: 100% 1px, 0 1px;
+}
+
+.icon-link__icon {
+  width: 24px;
+  height: 24px;
+  background-image: var(--icon-url);
+  background-size: contain;
+  background-repeat: no-repeat;
+  flex-shrink: 0;
+}
+
+@media (max-width: 767.98px) {
+  .icon-link__icon {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.icon-link__icon--jump {
+  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+.icon-link__icon--jump:hover {
+  transform: translateY(-8px);
+}
+
+.icon-link__text {
+  margin-left: 8px;
+}
+
+@media (max-width: 767.98px) {
+  .icon-link__text {
+    margin-left: 4px;
+  }
+}
+
+.icon-link__text span {
+  text-decoration: none;
+  background-image: linear-gradient(90deg, #0032a0, #0032a0);
+  background-image: linear-gradient(
+    90deg,
+    var(--text-color--primary, #0032a0),
+    var(--text-color--primary, #0032a0)
+  );
+  background-size: 0 1px, 100% 1px;
+  background-position: 0 100%, 100% 100%;
+  background-repeat: no-repeat;
+  transition: background-size 0.3s;
+  padding-bottom: 2px;
+}
+
+.icon-link__text--pure-text {
+  margin-left: 0;
+}
+
+@media (max-width: 767.98px) {
+  .icon-link__text--pure-text {
+    margin-left: 0;
+  }
+}
+
+.icon-link__text.disable-effect span {
+  background: none;
+}
+
+.icon-link--sm .icon-link__wrapper .icon-link__text {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.285;
+  letter-spacing: 0.04em;
+}
+
+@media (max-width: 1023.98px) {
+  .icon-link--sm .icon-link__wrapper .icon-link__text {
+    line-height: 1.428;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .icon-link--sm .icon-link__wrapper .icon-link__text {
+    line-height: 1.285;
+  }
+}
+
+.icon-link--md .icon-link__wrapper .icon-link__text {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.75;
+}
+
+@media (max-width: 1023.98px) {
+  .icon-link--md .icon-link__wrapper .icon-link__text {
+    font-size: 14px;
+    line-height: 1.714;
+    letter-spacing: 0.01em;
+  }
+}
+
+.icon-link--light .icon-link__wrapper .icon-link__text {
+  color: #fff;
+}
+
+.icon-link--light .icon-link__wrapper .icon-link__text span {
+  background-image: linear-gradient(90deg, #fff, #fff);
+}
+</style>