officialblock 1.0.7 → 1.0.9

package/src/components/ArticleList/type.ts

@@ -1,23 +1,17 @@
-import type { VNode } from 'vue';
-
-export interface ComponentProps {
-  /** 控制组件尺寸 */
-  size?: 'small' | 'medium' | 'large'
-  /** 是否禁用状态 */
-  disabled?: boolean
+export interface ArticleListProps {
   /** 双向绑定的值 */
-  modelValue: string | number
+  modelValue: any
 }
 
-export interface ComponentEmits {
-  (e: 'update:modelValue', value: string | number): void
-  (e: 'change', value: string | number): void
-  (e: 'focus', event: FocusEvent): void
+export interface ArticleListEmits {
+  (e: 'update:modelValue', value: any): void
+  (e: 'handleDelete', value: string | number): void
+  (e: 'handleCopy', value: any): void
 }
 
-export type ComponentSlots = {
-  /** 默认插槽内容 */
-  default?: (props: { value: string | number }) => VNode[]
-  /** 头部内容 */
-  header?: (props: { title: string }) => VNode[]
-}
+// export type ComponentSlots = {
+//   /** 默认插槽内容 */
+//   default?: (props: { value: string | number }) => VNode[]
+//   /** 头部内容 */
+//   header?: (props: { title: string }) => VNode[]
+// }

package/src/components/BannerImage/index.ts

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

package/src/components/BannerImage/index.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="banner-image" @mouseenter="isHover = true" @mouseleave="isHover = false">
+    <div class="banner-image__image" 
+      :style="{backgroundImage: 'url(' + modelValue?.data?.imgSrc + ')', 'background-position': 'center'}"
+    >
+      <div class="banner-image__title is-zh">
+        {{ modelValue?.data?.title }}
+      </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: 'BannerImage'
+})
+
+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: 'BannerImage',
+    readOnly: props.modelValue?.readOnly || false,
+    data: {
+      title: 'About YWIES',
+      imgSrc: 'https://osswebsite-test.cedim.cn/ywies-tx/static-images/about-ywies/01_About_YWIES_1_Header.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 lang="scss" scoped>
+.banner-image {
+  position: relative;
+}
+
+.banner-image__image {
+  height: 340px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-image: linear-gradient(184.08deg,rgba(0,0,0,.427) 21.79%,transparent 96.67%),var(--bg-image);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+@media (max-width: 1279.98px) {
+  .banner-image__image {
+    height: clamp(200px,(100vw - 576px)/5 + 200px,340px);
+  }
+}
+
+@media (max-width: 575.98px) {
+  .banner-image__image {
+    height: 200px;
+  }
+}
+
+.banner-image.has-quick-links {
+  padding-bottom: 38px;
+}
+
+.banner-image__title {
+  font-size: 60px;
+  line-height: 1.166;
+  font-weight: 500;
+  color: #fff;
+  text-shadow: 0 0 10px rgba(130,130,140,.12);
+  padding-top: 166px;
+}
+
+@media (max-width: 1279.98px) {
+  .banner-image__title {
+    padding-top: clamp(106px,(100vw - 576px)/11.73 + 106px,166px);
+  }
+}
+
+@media (max-width: 1023.98px) {
+  .banner-image__title {
+    font-size: 36px;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .banner-image__title {
+    font-size: 40px;
+    font-weight: 500;
+    line-height: 1.2;
+    letter-spacing: .02em;
+    padding-top: 106px;
+  }
+}
+
+@media (max-width: 575.98px) and (max-width: 1023.98px) {
+  .banner-image__title {
+    font-size: 32px;
+    font-weight: 500;
+    line-height: 1.2;
+    letter-spacing: .02em;
+  }
+}
+
+@media (max-width: 575.98px) and (max-width: 767.98px) {
+  .banner-image__title {
+    font-size: 24px;
+    line-height: 1.09;
+  }
+}
+
+.banner-image__title.is-zh {
+  font-weight: 700;
+}
+</style>

package/src/components/BannerImage/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/BannerImage/type.ts

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

package/src/components/BannerImageWithLink/index.ts

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

package/src/components/BannerImageWithLink/index.vue

@@ -0,0 +1,323 @@
+<template>
+  <div
+    style="margin-top: 30px; margin-bottom: 30px; border: 2px solid red"
+    class="custom-iframe-container"
+    :style="{ backgroundColor: modelValue?.bgColor }"
+    @mouseenter="isHover = true"
+    @mouseleave="isHover = false"
+  >
+    <div class="banner-image-with-link">
+      <div class="banner-wrapper" :style="{ '--bg-image': backgroundImageUrl }">
+        <div class="banner-body">
+          <div class="banner-body__title">ding-title</div>
+          <div class="banner-body__link">
+            <div class="circle-link circle-link--light">
+              <a href="https://www.baidu.com" target="_blank"
+                ><!---->
+                <div>bing-placholder</div>
+                <span class="circle-link__icon circle-link__icon--light"></span
+              ></a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <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";
+
+// 定义组件名称
+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: "BannerImageWithLink",
+    readOnly: props.modelValue?.readOnly || false,
+    title: "bing-bannerImgLink",
+    image:
+      "https://osswebsite-test.cedim.cn/media-library/ywies-tx/pdf/TX%20Brochure%20Cover_optim_origin.png",
+    text: "哈哈哈",
+    linkType: "External Link",
+    link: "https://www.baidu.com",
+  };
+  emit("update:modelValue", data);
+  console.log("props.modelValue111111111", props.modelValue);
+};
+
+handleInit();
+const backgroundImageUrl = computed(() => {
+  let url = props.modelValue?.image ? `url(${props.modelValue.image})` : "none";
+  return url;
+});
+</script>
+
+<style scoped lang="scss">
+.custom-iframe-container {
+  position: relative;
+}
+.banner-image-with-link {
+  position: relative;
+}
+
+.banner-image-with-link .banner-wrapper {
+  position: relative;
+  height: 0;
+  padding-bottom: 45.833%;
+  background-position: 50%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-image: linear-gradient(
+      180deg,
+      transparent 22.84%,
+      rgba(0, 0, 0, 0.6)
+    ),
+    var(--bg-image);
+}
+
+@media (max-width: 767.98px) {
+  .banner-image-with-link .banner-wrapper {
+    padding-bottom: 0;
+    height: 448px;
+  }
+}
+
+.banner-image-with-link .banner-body {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: clamp(55px, (100vw - 320px)/44.301 + 55px, 76.67px);
+}
+
+.banner-image-with-link .banner-body__title {
+  font-size: 42px;
+  line-height: 1.43;
+  letter-spacing: 0.015em;
+  font-weight: 700;
+  color: #fff;
+}
+
+@media (max-width: 1023.98px) {
+  .banner-image-with-link .banner-body__title {
+    font-size: 36px;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .banner-image-with-link .banner-body__title {
+    font-size: 40px;
+    font-weight: 500;
+    line-height: 1.2;
+    letter-spacing: 0.02em;
+  }
+}
+
+@media (max-width: 575.98px) and (max-width: 1023.98px) {
+  .banner-image-with-link .banner-body__title {
+    font-size: 32px;
+    font-weight: 500;
+    line-height: 1.2;
+    letter-spacing: 0.02em;
+  }
+}
+
+@media (max-width: 575.98px) and (max-width: 767.98px) {
+  .banner-image-with-link .banner-body__title {
+    font-size: 24px;
+    line-height: 1.09;
+  }
+}
+
+.banner-image-with-link .banner-body__link {
+  margin-top: 7px;
+}
+
+@media (max-width: 575.98px) {
+  .banner-image-with-link .banner-body__link {
+    margin-top: 18px;
+  }
+}
+.circle-link {
+  display: flex;
+  --link-color: var(--link-blue-color);
+}
+
+.circle-link--light {
+  --link-color: var(--link-light-color);
+}
+
+.circle-link a,
+.circle-link button {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.285;
+  letter-spacing: 0.04em;
+  border: none;
+  background: none;
+  color: var(--link-color);
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  padding: 0;
+}
+
+@media (max-width: 1023.98px) {
+  .circle-link a,
+  .circle-link button {
+    line-height: 1.428;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .circle-link a,
+  .circle-link button {
+    line-height: 1.285;
+  }
+}
+
+.circle-link a:hover .circle-link__icon:before,
+.circle-link button:hover .circle-link__icon:before {
+  transform: translate(-50%, -50%);
+}
+
+.circle-link a:hover .circle-link__icon:after,
+.circle-link button:hover .circle-link__icon:after {
+  transform: translate(150%, -50%);
+}
+
+.circle-link a:active .circle-link__icon:before,
+.circle-link button:active .circle-link__icon:before {
+  transform: translate(-260%, -50%);
+}
+
+.circle-link a:active .circle-link__icon:after,
+.circle-link button:active .circle-link__icon:after {
+  transform: translate(-50%, -50%);
+}
+
+.circle-link__icon {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  overflow: hidden;
+  background-color: var(--link-color);
+  position: relative;
+  margin-left: 7px;
+  flex-shrink: 0;
+}
+
+@media (max-width: 767.98px) {
+  .circle-link__icon {
+    width: 12px;
+    height: 12px;
+    margin-left: 4px;
+  }
+}
+
+.circle-link__icon:after,
+.circle-link__icon:before {
+  content: "";
+  width: 6px;
+  height: 9px;
+  position: absolute;
+  top: 50%;
+  left: 55%;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNiA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC4yMzUxOTYgNy42MjA3OUwzLjM2MDE4IDQuNDk1OEwwLjIzNTE5NiAxLjM3MDgyQzAuMTYwNjMgMS4yOTYyNSAwLjEwMTQ4MSAxLjIwNzczIDAuMDYxMTI1OSAxLjExMDMxQzAuMDIwNzcxIDEuMDEyODggMS41NzEzN2UtMDkgMC45MDg0NiAwIDAuODAzMDA4Qy0xLjU3MTM2ZS0wOSAwLjY5NzU1NSAwLjAyMDc3MSAwLjU5MzEzNSAwLjA2MTEyNTkgMC40OTU3MUMwLjEwMTQ4MSAwLjM5ODI4NSAwLjE2MDYzIDAuMzA5NzYyIDAuMjM1MTk2IDAuMjM1MTk1QzAuMzA5NzYyIDAuMTYwNjI5IDAuMzk4Mjg1IDAuMTAxNDggMC40OTU3MSAwLjA2MTEyNTFDMC41OTMxMzYgMC4wMjA3NzAyIDAuNjk3NTU2IC0xLjU3MTM3ZS0wOSAwLjgwMzAwOCAwQzAuOTA4NDYxIDEuNTcxMzdlLTA5IDEuMDEyODggMC4wMjA3NzAyIDEuMTEwMzEgMC4wNjExMjUxQzEuMjA3NzMgMC4xMDE0OCAxLjI5NjI1IDAuMTYwNjI5IDEuMzcwODIgMC4yMzUxOTVMNS4wNjc2NCAzLjkzMjAyQzUuMzgxNzUgNC4yNDYxMyA1LjM4MTc1IDQuNzUzNTMgNS4wNjc2NCA1LjA2NzY0TDEuMzcwODIgOC43NjQ0NkMxLjI5NjMxIDguODM5MTMgMS4yMDc4IDguODk4MzYgMS4xMTAzNyA4LjkzODc4QzEuMDEyOTQgOC45NzkyIDAuOTA4NDkxIDkgMC44MDMwMDggOUMwLjY5NzUyNSA5IDAuNTkzMDc4IDguOTc5MiAwLjQ5NTY0NSA4LjkzODc4QzAuMzk4MjEyIDguODk4MzYgMC4zMDk3MDcgOC44MzkxMyAwLjIzNTE5NiA4Ljc2NDQ2Qy0wLjA3MDg1OTEgOC40NTAzNSAtMC4wNzg5MTMyIDcuOTM0ODkgMC4yMzUxOTYgNy42MjA3OVoiIGZpbGw9IiMwMDFFNjAiLz4KPC9zdmc+Cgo=);
+  background-position: 50%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-color: hsla(0, 0%, 100%, 0);
+  transition: transform 0.3s ease-in-out;
+}
+
+@media (max-width: 767.98px) {
+  .circle-link__icon:after,
+  .circle-link__icon:before {
+    width: 4.7px;
+    height: 6px;
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNiA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC4yMzUxOTYgNy42MjA3OUwzLjM2MDE4IDQuNDk1OEwwLjIzNTE5NiAxLjM3MDgyQzAuMTYwNjMgMS4yOTYyNSAwLjEwMTQ4MSAxLjIwNzczIDAuMDYxMTI1OSAxLjExMDMxQzAuMDIwNzcxIDEuMDEyODggMS41NzEzN2UtMDkgMC45MDg0NiAwIDAuODAzMDA4Qy0xLjU3MTM2ZS0wOSAwLjY5NzU1NSAwLjAyMDc3MSAwLjU5MzEzNSAwLjA2MTEyNTkgMC40OTU3MUMwLjEwMTQ4MSAwLjM5ODI4NSAwLjE2MDYzIDAuMzA5NzYyIDAuMjM1MTk2IDAuMjM1MTk1QzAuMzA5NzYyIDAuMTYwNjI5IDAuMzk4Mjg1IDAuMTAxNDggMC40OTU3MSAwLjA2MTEyNTFDMC41OTMxMzYgMC4wMjA3NzAyIDAuNjk3NTU2IC0xLjU3MTM3ZS0wOSAwLjgwMzAwOCAwQzAuOTA4NDYxIDEuNTcxMzdlLTA5IDEuMDEyODggMC4wMjA3NzAyIDEuMTEwMzEgMC4wNjExMjUxQzEuMjA3NzMgMC4xMDE0OCAxLjI5NjI1IDAuMTYwNjI5IDEuMzcwODIgMC4yMzUxOTVMNS4wNjc2NCAzLjkzMjAyQzUuMzgxNzUgNC4yNDYxMyA1LjM4MTc1IDQuNzUzNTMgNS4wNjc2NCA1LjA2NzY0TDEuMzcwODIgOC43NjQ0NkMxLjI5NjMxIDguODM5MTMgMS4yMDc4IDguODk4MzYgMS4xMTAzNyA4LjkzODc4QzEuMDEyOTQgOC45NzkyIDAuOTA4NDkxIDkgMC44MDMwMDggOUMwLjY5NzUyNSA5IDAuNTkzMDc4IDguOTc5MiAwLjQ5NTY0NSA4LjkzODc4QzAuMzk4MjEyIDguODk4MzYgMC4zMDk3MDcgOC44MzkxMyAwLjIzNTE5NiA4Ljc2NDQ2Qy0wLjA3MDg1OTEgOC40NTAzNSAtMC4wNzg5MTMyIDcuOTM0ODkgMC4yMzUxOTYgNy42MjA3OVoiIGZpbGw9IiMwMDFFNjAiLz4KPC9zdmc+Cgo=);
+    background-position: 50%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-color: hsla(0, 0%, 100%, 0);
+  }
+}
+
+.circle-link__icon:before {
+  transform: translate(-260%, -50%);
+}
+
+.circle-link__icon:after {
+  transform: translate(-50%, -50%);
+}
+
+.circle-link__icon--light:after,
+.circle-link__icon--light:before {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNiA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC4yMzUxOTYgNy42MjA3OUwzLjM2MDE4IDQuNDk1OEwwLjIzNTE5NiAxLjM3MDgyQzAuMTYwNjMgMS4yOTYyNSAwLjEwMTQ4MSAxLjIwNzczIDAuMDYxMTI1OSAxLjExMDMxQzAuMDIwNzcxIDEuMDEyODggMS41NzEzN2UtMDkgMC45MDg0NiAwIDAuODAzMDA4Qy0xLjU3MTM2ZS0wOSAwLjY5NzU1NSAwLjAyMDc3MSAwLjU5MzEzNSAwLjA2MTEyNTkgMC40OTU3MUMwLjEwMTQ4MSAwLjM5ODI4NSAwLjE2MDYzIDAuMzA5NzYyIDAuMjM1MTk2IDAuMjM1MTk1QzAuMzA5NzYyIDAuMTYwNjI5IDAuMzk4Mjg1IDAuMTAxNDggMC40OTU3MSAwLjA2MTEyNTFDMC41OTMxMzYgMC4wMjA3NzAyIDAuNjk3NTU2IC0xLjU3MTM3ZS0wOSAwLjgwMzAwOCAwQzAuOTA4NDYxIDEuNTcxMzdlLTA5IDEuMDEyODggMC4wMjA3NzAyIDEuMTEwMzEgMC4wNjExMjUxQzEuMjA3NzMgMC4xMDE0OCAxLjI5NjI1IDAuMTYwNjI5IDEuMzcwODIgMC4yMzUxOTVMNS4wNjc2NCAzLjkzMjAyQzUuMzgxNzUgNC4yNDYxMyA1LjM4MTc1IDQuNzUzNTMgNS4wNjc2NCA1LjA2NzY0TDEuMzcwODIgOC43NjQ0NkMxLjI5NjMxIDguODM5MTMgMS4yMDc4IDguODk4MzYgMS4xMTAzNyA4LjkzODc4QzEuMDEyOTQgOC45NzkyIDAuOTA4NDkxIDkgMC44MDMwMDggOUMwLjY5NzUyNSA5IDAuNTkzMDc4IDguOTc5MiAwLjQ5NTY0NSA4LjkzODc4QzAuMzk4MjEyIDguODk4MzYgMC4zMDk3MDcgOC44MzkxMyAwLjIzNTE5NiA4Ljc2NDQ2Qy0wLjA3MDg1OTEgOC40NTAzNSAtMC4wNzg5MTMyIDcuOTM0ODkgMC4yMzUxOTYgNy42MjA3OVoiIGZpbGw9IiMwMDFFNjAiLz4KPC9zdmc+Cgo=);
+  background-position: 50%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-color: hsla(0, 0%, 100%, 0);
+}
+
+@media (max-width: 767.98px) {
+  .circle-link__icon--light:after,
+  .circle-link__icon--light:before {
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNiA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC4yMzUxOTYgNy42MjA3OUwzLjM2MDE4IDQuNDk1OEwwLjIzNTE5NiAxLjM3MDgyQzAuMTYwNjMgMS4yOTYyNSAwLjEwMTQ4MSAxLjIwNzczIDAuMDYxMTI1OSAxLjExMDMxQzAuMDIwNzcxIDEuMDEyODggMS41NzEzN2UtMDkgMC45MDg0NiAwIDAuODAzMDA4Qy0xLjU3MTM2ZS0wOSAwLjY5NzU1NSAwLjAyMDc3MSAwLjU5MzEzNSAwLjA2MTEyNTkgMC40OTU3MUMwLjEwMTQ4MSAwLjM5ODI4NSAwLjE2MDYzIDAuMzA5NzYyIDAuMjM1MTk2IDAuMjM1MTk1QzAuMzA5NzYyIDAuMTYwNjI5IDAuMzk4Mjg1IDAuMTAxNDggMC40OTU3MSAwLjA2MTEyNTFDMC41OTMxMzYgMC4wMjA3NzAyIDAuNjk3NTU2IC0xLjU3MTM3ZS0wOSAwLjgwMzAwOCAwQzAuOTA4NDYxIDEuNTcxMzdlLTA5IDEuMDEyODggMC4wMjA3NzAyIDEuMTEwMzEgMC4wNjExMjUxQzEuMjA3NzMgMC4xMDE0OCAxLjI5NjI1IDAuMTYwNjI5IDEuMzcwODIgMC4yMzUxOTVMNS4wNjc2NCAzLjkzMjAyQzUuMzgxNzUgNC4yNDYxMyA1LjM4MTc1IDQuNzUzNTMgNS4wNjc2NCA1LjA2NzY0TDEuMzcwODIgOC43NjQ0NkMxLjI5NjMxIDguODM5MTMgMS4yMDc4IDguODk4MzYgMS4xMTAzNyA4LjkzODc4QzEuMDEyOTQgOC45NzkyIDAuOTA4NDkxIDkgMC44MDMwMDggOUMwLjY5NzUyNSA5IDAuNTkzMDc4IDguOTc5MiAwLjQ5NTY0NSA4LjkzODc4QzAuMzk4MjEyIDguODk4MzYgMC4zMDk3MDcgOC44MzkxMyAwLjIzNTE5NiA4Ljc2NDQ2Qy0wLjA3MDg1OTEgOC40NTAzNSAtMC4wNzg5MTMyIDcuOTM0ODkgMC4yMzUxOTYgNy42MjA3OVoiIGZpbGw9IiMwMDFFNjAiLz4KPC9zdmc+Cgo=);
+    background-position: 50%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-color: hsla(0, 0%, 100%, 0);
+  }
+}
+</style>