officialblock 1.0.6 → 1.0.8

package/src/components/LinkLIst/index.ts

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

package/src/components/LinkLIst/index.vue

@@ -0,0 +1,317 @@
+<template>
+  <div class="link-list" :style="{ backgroundColor: modelValue?.bgColor }" @mouseenter="isHover = true" @mouseleave="isHover = false">
+    <div class="link-list__container justify-content-center"  :class="[modelValue?.width ? `container-content-${modelValue?.width}` : 'container-content']">
+      <div class="link-list__item" v-for="item in modelValue?.data" :key="item.id" @click="handleClick(item)">
+        <div class="circle-link" :class="[item.isLight ? 'circle-link--light' : '']" v-if="item.type === 'circle'">
+          <a :href="item.url || '#' " :class="[item.isLight ? 'nuxt-link-exact-active nuxt-link-active' : '']">
+            <div>{{ item.text }}</div> 
+            <span class="circle-link__icon" :class="[item.isLight ? 'circle-link__icon--light' : '']"></span>
+          </a>
+        </div>
+        <div class="text-link" v-else>
+          <button type="button" class="text-link__wrapper link link--udrline-2">
+            <span class="text-link__text">{{ item.text }}</span>
+          </button>
+        </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>
+  <ProfileModel v-model:show="showProfile" :data="profileData"></ProfileModel>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { randomString } from '@/utils/common'
+import Setting from './setting.vue'
+import Operate from '@/components/Operate/index.vue'
+import ProfileModel from '@/components/Profile/modal.vue'
+
+// 定义组件名称
+defineOptions({
+  name: 'LinkList'
+})
+
+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: 'LinkList',
+    readOnly: props.modelValue?.readOnly || false,
+    width: '',
+    bgColor: '',
+    data: [
+      {
+        id: randomString(),
+        type: 'circle',
+        text: '了解更多',
+        url: 'https://www.baidu.com',
+        isExternal: false,
+        isLight: false
+      },
+      {
+        id: randomString(),
+        type: 'circle',
+        text: '了解更多',
+        url: 'https://www.baidu.com',
+        isExternal: false,
+        isLight: true
+      },
+      {
+        id: randomString(),
+        type: 'text',
+        text: '了解更多',
+        profile: {
+          logo: 'https://ywies-tx.cedim.cn/images/logo/logo-ycyw.png',
+          title: '耀华国际教育学校浙江桐乡',
+          subTitle: '耀华国际教育学校浙江桐乡',
+          name: '耀华国际教育学校浙江桐乡',
+          label: '123',
+          imgSrc: 'https://osswebsite.ycyw.com/media-library/ywies-bj/images/home/ywies-tx.jpg',
+          alt: '',
+          buttonList: {
+            id: props.modelValue?.id || randomString(),
+            type: 'BtnList',
+            readOnly: true,
+            width: '',
+            bgColor: '',
+            data: [
+              {
+                id: randomString(),
+                type: 'white',
+                text: '了解更多',
+                url: 'https://www.baidu.com',
+                isExternal: false
+              },
+              {
+                id: randomString(),
+                type: 'light',
+                text: '了解更多',
+                url: 'https://www.baidu.com',
+                isExternal: false
+              }
+            ]
+          },
+          paragraphs: [{
+            id: randomString(),
+            title: '123',
+            content: '123'
+          }]
+        }
+      }
+    ]
+  }
+  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)
+}
+
+const showProfile = ref<boolean>(false)
+const profileData = ref<any>({})
+const handleClick = (item: any) => {
+  if (item.type !== 'text') return
+  profileData.value = item.profile
+  showProfile.value = true
+}
+
+handleInit()
+</script>
+
+<style lang="scss" scoped>
+.link-list {
+  position: relative;
+}
+
+.link-list__container {
+  display: flex;
+  align-items: center;
+}
+
+.link-list__item:not(:first-child) {
+  margin-left: 40px;
+}
+
+@media (max-width: 767.98px) {
+  .link-list__item:not(:first-child) {
+    margin-left: 24px;
+  }
+}
+
+.link-list.center .link-list__container {
+  justify-content: center;
+}
+
+.text-link {
+  display: flex;
+}
+
+.text-link__wrapper {
+  background: none;
+  padding: 0;
+  border: none;
+  --text-color: #0032a0;
+}
+
+.text-link--light .text-link__wrapper {
+  --text-color: #fff;
+}
+
+.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: .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,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNiA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC4yMzUxOTYgNy42MjA3OUwzLjM2MDE4IDQuNDk1OEwwLjIzNTE5NiAxLjM3MDgyQzAuMTYwNjMgMS4yOTYyNSAwLjEwMTQ4MSAxLjIwNzczIDAuMDYxMTI1OSAxLjExMDMxQzAuMDIwNzcxIDEuMDEyODggMS41NzEzN2UtMDkgMC45MDg0NiAwIDAuODAzMDA4Qy0xLjU3MTM2ZS0wOSAwLjY5NzU1NSAwLjAyMDc3MSAwLjU5MzEzNSAwLjA2MTEyNTkgMC40OTU3MUMwLjEwMTQ4MSAwLjM5ODI4NSAwLjE2MDYzIDAuMzA5NzYyIDAuMjM1MTk2IDAuMjM1MTk1QzAuMzA5NzYyIDAuMTYwNjI5IDAuMzk4Mjg1IDAuMTAxNDggMC40OTU3MSAwLjA2MTEyNTFDMC41OTMxMzYgMC4wMjA3NzAyIDAuNjk3NTU2IC0xLjU3MTM3ZS0wOSAwLjgwMzAwOCAwQzAuOTA4NDYxIDEuNTcxMzdlLTA5IDEuMDEyODggMC4wMjA3NzAyIDEuMTEwMzEgMC4wNjExMjUxQzEuMjA3NzMgMC4xMDE0OCAxLjI5NjI1IDAuMTYwNjI5IDEuMzcwODIgMC4yMzUxOTVMNS4wNjc2NCAzLjkzMjAyQzUuMzgxNzUgNC4yNDYxMyA1LjM4MTc1IDQuNzUzNTMgNS4wNjc2NCA1LjA2NzY0TDEuMzcwODIgOC43NjQ0NkMxLjI5NjMxIDguODM5MTMgMS4yMDc4IDguODk4MzYgMS4xMTAzNyA4LjkzODc4QzEuMDEyOTQgOC45NzkyIDAuOTA4NDkxIDkgMC44MDMwMDggOUMwLjY5NzUyNSA5IDAuNTkzMDc4IDguOTc5MiAwLjQ5NTY0NSA4LjkzODc4QzAuMzk4MjEyIDguODk4MzYgMC4zMDk3MDcgOC44MzkxMyAwLjIzNTE5NiA4Ljc2NDQ2Qy0wLjA3MDg1OTEgOC40NTAzNSAtMC4wNzg5MTMyIDcuOTM0ODkgMC4yMzUxOTYgNy42MjA3OVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=);
+  background-position: 50%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-color: hsla(0,0%,100%,0);
+  transition: transform .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,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgNCA2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMSAxTDMuMDU3MTQgMy4wNTcxNEwxIDUuMTE0MjkiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);
+    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,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgNCA2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMSAxTDMuMDU3MTQgMy4wNTcxNEwxIDUuMTE0MjkiIHN0cm9rZT0iIzAwMUU2MCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K);
+    background-position: 50%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-color: hsla(0,0%,100%,0);
+  }
+}
+</style>

package/src/components/LinkLIst/setting.vue

@@ -0,0 +1,264 @@
+<template>
+  <a-drawer :width="500" :visible="show" :footer="false" @cancel="handleCancel" unmountOnClose>
+    <template #title>
+      {{data.type}}组件编辑
+    </template>
+    <div class="setting-content">
+      <!-- 组件自身属性 -->
+      <div class="setting-header flex items-center">
+        <span class="header-title">组件宽度</span>
+        <a-select v-model="data.width" placeholder="请选择" allow-clear>
+          <a-option value="">默认</a-option>
+          <a-option value="small">小</a-option>
+          <a-option value="middle">中</a-option>
+          <a-option value="max">大</a-option>
+        </a-select>
+      </div>
+      <div class="setting-header flex items-center">
+        <span class="header-title">组件背景</span>
+        <a-select v-model="data.bgColor" placeholder="请选择" allow-clear>
+          <a-option value="#ffffff">白色</a-option>
+          <a-option value="#F7F7FA">灰色</a-option>
+        </a-select>
+      </div>
+
+      <a-button-group type="primary">
+        <a-button size="mini" @click="handleAdd('circle')"><template #icon><icon-plus /></template> 圆链接 </a-button>
+        <a-button size="mini" @click="handleAdd('text')"><template #icon><icon-plus /></template> 文字链接 </a-button>
+      </a-button-group>
+
+      <!-- 子组件属性 -->
+      <div class="setting-body">
+        <div class="setting-item">
+          <p class="item-name">链接</p>
+          <draggable
+            v-model="data.data"
+            :component-data="{
+              tag: 'div',
+              type: 'transition-group',
+              name: !drag ? 'flip-list' : null
+            }"
+            v-bind="linkDragOptions"
+            :disabled="!shouldShowDragHandle(data.data)"
+            @start="drag = true"
+            @end="drag = false"
+            item-key="id"
+          >
+            <template #item="{ element: link }">
+              <div
+                class="item-button draggable-item"
+                :class="{ 'sortable-disabled': !shouldShowDragHandle(data.data) }"
+                :key="link.id"
+              >
+                <div class="btn-group">
+                  <div
+                    v-if="shouldShowDragHandle(data.data)"
+                    class="drag-handle"
+                  >
+                    <icon-drag-arrow class="drag-icon" />
+                  </div>
+                  <icon-delete class="btn-delete" @click="handleDelete(link.id)" />
+                </div>
+                <a-link href="link">{{ link.text }}</a-link>
+                <template v-if="link.type === 'circle'">
+                  <div class="item-action flex items-center">
+                    <a-input class="action-text" v-model="link.text" placeholder="链接文本" allow-clear />
+                    <a-input v-model="link.url" placeholder="链接链接" allow-clear />
+                  </div>
+                  <a-checkbox :model-value="link.isExternal">是否外部链接</a-checkbox>
+                  <a-checkbox style="padding-left: 10px;" :model-value="link.isLight">是否亮色</a-checkbox>
+                </template>
+                <template v-else>
+                  <a-input class="action-text m-2" v-model="link.text" placeholder="链接文本" allow-clear />
+                  <p class="item-name">Profile Information</p>
+
+                  <ProfileSetting :data="link.profile"></ProfileSetting>
+                </template>
+              </div>
+            </template>
+          </draggable>
+        </div>
+      </div>
+    </div>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import draggable from 'vuedraggable'
+import ProfileSetting from '@/components/Profile/setting.vue'
+import { randomString } from '@/utils/common'
+
+// 拖拽相关状态
+const drag = ref(false)
+
+// 不同类型的拖拽配置选项
+const linkDragOptions = computed(() => ({
+  animation: 200,
+  group: 'links', // 链接专用分组
+  disabled: false,
+  ghostClass: 'ghost'
+}))
+
+// 检查是否应该显示拖拽图标
+const shouldShowDragHandle = (list: any[]) => {
+  return list && list.length > 1
+}
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+
+  data: {
+    type: Object,
+    default: () => {}
+  }
+})
+
+const emit = defineEmits(['update:show']);
+
+const handleCancel = () => {
+  emit('update:show', false);
+}
+
+const handleAdd = (type: string) => {
+  const detail = props.data;
+  detail.data.push({
+    id: randomString(),
+    type,
+    text: '查看更多',
+    url: undefined,
+    isExternal: false,
+    isLight: false
+  })
+}
+
+const handleDelete = (id: string) => {
+  props.data.data = props.data.data.filter((item: any) => item.id !== id)
+}
+</script>
+
+<style lang="scss" scoped>
+.setting-content {
+  .setting-header {
+    padding-bottom: 12px;
+
+    .header-title {
+      width: 120px;
+      padding-right: 12px;
+      text-align: right;
+    }
+  }
+
+  .setting-body {
+    margin-top: 12px;
+    
+    .setting-item {
+      position: relative;
+      padding: 16px 12px;
+      background: #f0f2f5;
+      border-radius: 8px;
+      margin-bottom: 20px;
+
+      .btn-group {
+        position: absolute;
+        right: 0;
+        top: 0;
+        display: flex;
+        align-items: center;
+        padding: 4px;
+
+        .btn-delete {
+          padding: 4px;
+          font-size: 24px;
+          cursor: pointer;
+        }
+      }
+
+      .item-name {
+        font-size: 16px;
+        font-weight: 600;
+        padding-bottom: 10px;
+        border-bottom: 1px solid #fff;
+      }
+
+      .item-button {
+        position: relative;
+        padding: 12px 8px 4px;
+        background: #fff;
+        border-radius: 4px;
+        margin: 4px 0;
+        transition: all 0.3s ease;
+
+        &.draggable-item {
+          cursor: move;
+
+          &:hover {
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            transform: translateY(-1px);
+          }
+
+          // 当禁用拖拽时，不显示拖拽效果
+          &.sortable-disabled {
+            cursor: default;
+
+            &:hover {
+              box-shadow: none;
+              transform: none;
+            }
+          }
+        }
+
+        .arco-input-wrapper {
+          background: #f2f3f5;
+        }
+      }
+
+      // 拖拽相关样式
+      .flip-list-move {
+        transition: transform 0.5s;
+      }
+
+      .no-move {
+        transition: transform 0s;
+      }
+
+      .ghost {
+        opacity: 0.5;
+        background: #c8ebfb;
+      }
+
+      .item-action {
+        padding: 10px 0;
+
+        .action-text {
+          width: 150px;
+          margin-right: 8px;
+        }
+      }
+    }
+  }
+
+  .drag-handle {
+    padding: 4px;
+    cursor: grab;
+    padding: 4px;
+    border-radius: 4px;
+
+    &:hover {
+      background-color: #f0f2f5;
+    }
+
+    &:active {
+      cursor: grabbing;
+    }
+
+    .drag-icon {
+      font-size: 16px;
+      color: #86909c;
+    }
+  }
+}
+</style>

package/src/components/LinkLIst/type.ts

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

package/src/components/Media/index.vue

@@ -241,7 +241,7 @@ onUnmounted(() => {
       }
 
       .image:not(:last-of-type) {
-        margin-right: 10.6px
+        margin-right: 10.6px;
       }
     }
 
@@ -272,56 +272,56 @@ onUnmounted(() => {
   }
 }
 
-@media(max-width: 767.98px) {
+@media (max-width: 767.98px) {
   .image-container .image {
     border-radius: 0;
   }
 }
 
-@media(max-width: 1023.98px) {
+@media (max-width: 1023.98px) {
   .image-desc p {
-    font-size:14px;
+    font-size: 14px;
     line-height: 1.714;
-    letter-spacing: .01em
+    letter-spacing: .01em;
   }
 }
 
-@media(max-width: 767.98px) {
+@media (max-width: 767.98px) {
   .video-container {
-    width:100vw;
-    padding: 0
+    width: 100vw;
+    padding: 0;
   }
 }
 
-@media(max-width: 767.98px) {
+@media (max-width: 767.98px) {
   .image-list-container .image-preview {
-    padding-bottom:68.75%
+    padding-bottom: 68.75%;
   }
 }
 
-@media(max-width: 1023.98px) {
+@media (max-width: 1023.98px) {
   .thumbnail__nav__prev,
   .thumbnail__nav__next {
-    width:28px
+    width: 28px;
   }
 }
 
-@media(max-width: 767.98px) {
+@media (max-width: 767.98px) {
   .thumbnail__nav__prev,
   .thumbnail__nav__next {
-    box-shadow:0 4px 4px hsla(0,0%,100%,.2)
+    box-shadow: 0 4px 4px hsla(0,0%,100%,.2);
   }
 }
 
-@media(max-width: 900px) {
+@media (max-width: 900px) {
   .image-list-container .image-list-wrapper .image-list .image {
-    width:80px
+    width: 80px;
   }
 }
 
-@media(max-width: 767.98px) {
+@media (max-width: 767.98px) {
   .image-list-container .image-list-wrapper .image-list .image {
-    width:75px
+    width: 75px;
   }
 }
 </style>