乐谱 弹窗 列表

src/components/Empty/Empty.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="Empty">
+    <img src="./imgs/nomore.png" alt="" />
+    <div class="text">{{ props.text }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    text: string
+  }>(),
+  {
+    text: "暂无内容"
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+.Empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  > img {
+    width: 158px;
+  }
+  .text {
+    margin-top: 6px;
+    font-size: 16px;
+    color: #777777;
+  }
+}
+</style>

src/components/Empty/index.ts

@@ -0,0 +1,2 @@
+import Empty from "./Empty.vue"
+export default Empty

src/components/Input.vue

@@ -1,10 +1,10 @@
 <template>
-  <div 
+  <div
     class="input"
     :class="{
-      'disabled': disabled,
-      'focused': focused,
-      'simple': simple,
+      disabled: disabled,
+      focused: focused,
+      simple: simple
     }"
   >
     <span class="prefix">
@@ -14,7 +14,7 @@
       type="text"
       ref="inputRef"
       :disabled="disabled"
-      :value="value" 
+      :value="value"
       :placeholder="placeholder"
       @input="$event => handleInput($event)"
       @focus="$event => handleFocus($event)"
@@ -29,40 +29,43 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref } from "vue"
 
-withDefaults(defineProps<{
-  value: string
-  disabled?: boolean
-  placeholder?: string
-  simple?: boolean
-}>(), {
-  disabled: false,
-  placeholder: '',
-  simple: false,
-})
+withDefaults(
+  defineProps<{
+    value: string
+    disabled?: boolean
+    placeholder?: string
+    simple?: boolean
+  }>(),
+  {
+    disabled: false,
+    placeholder: "",
+    simple: false
+  }
+)
 
 const emit = defineEmits<{
-  (event: 'update:value', payload: string): void
-  (event: 'input', payload: Event): void
-  (event: 'change', payload: Event): void
-  (event: 'blur', payload: Event): void
-  (event: 'focus', payload: Event): void
-  (event: 'enter', payload: Event): void
+  (event: "update:value", payload: string): void
+  (event: "input", payload: Event): void
+  (event: "change", payload: Event): void
+  (event: "blur", payload: Event): void
+  (event: "focus", payload: Event): void
+  (event: "enter", payload: Event): void
 }>()
 
 const focused = ref(false)
 
 const handleInput = (e: Event) => {
-  emit('update:value', (e.target as HTMLInputElement).value)
+  emit("update:value", (e.target as HTMLInputElement).value)
 }
 const handleBlur = (e: Event) => {
   focused.value = false
-  emit('blur', e)
+  emit("blur", e)
 }
 const handleFocus = (e: Event) => {
   focused.value = true
-  emit('focus', e)
+  emit("focus", e)
 }
 
 const inputRef = ref<HTMLInputElement>()
@@ -71,17 +74,17 @@ const focus = () => {
 }
 
 defineExpose({
-  focus,
+  focus
 })
 </script>
 
 <style lang="scss" scoped>
 .input {
   background-color: #fff;
-  border: 1px solid #d9d9d9;
+  border: 1px solid #dedede;
   padding: 0 5px;
   border-radius: $borderRadius;
-  transition: border-color .25s;
+  transition: border-color 0.25s;
   font-size: 13px;
   display: flex;
 
@@ -96,14 +99,16 @@ defineExpose({
     padding: 0 5px;
     flex: 1;
     font-size: 13px;
-    font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
+      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
     &::placeholder {
       color: #bfbfbf;
     }
   }
 
-  &:not(.disabled):hover, &.focused {
+  &:not(.disabled):hover,
+  &.focused {
     border-color: $themeColor;
   }
 
@@ -121,7 +126,8 @@ defineExpose({
     border: 0;
   }
 
-  .prefix, .suffix {
+  .prefix,
+  .suffix {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -129,4 +135,4 @@ defineExpose({
     user-select: none;
   }
 }
-</style>
+</style>

src/components/ellipsisScroll/ellipsisScroll.vue

@@ -0,0 +1,85 @@
+<template>
+  <div ref="ellipsisScrollDom" :class="[isScroll && 'isScroll', isScroll && props.autoScroll && 'autoScroll']" class="ellipsisScroll">
+    {{ props.title }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, nextTick } from "vue"
+
+const props = defineProps<{
+  title: string
+  autoScroll?: boolean
+}>()
+
+const ellipsisScrollDom = ref<HTMLElement>()
+const isScroll = ref(false)
+
+onMounted(() => {
+  if (props?.autoScroll) {
+    nextTick(() => {
+      handleAutoScroll(ellipsisScrollDom.value)
+    })
+  } else {
+    ellipsisScrollDom.value?.addEventListener("mouseenter", handleIsScroll)
+    ellipsisScrollDom.value?.addEventListener("mouseleave", handleLeaveScroll)
+  }
+})
+onUnmounted(() => {
+  if (!props?.autoScroll) {
+    ellipsisScrollDom.value?.removeEventListener("mouseenter", handleIsScroll)
+    ellipsisScrollDom.value?.removeEventListener("mouseleave", handleLeaveScroll)
+  }
+})
+
+let widthCalc = 0
+function handleIsScroll(e: MouseEvent) {
+  const target = e.target as HTMLElement
+  widthCalc = target.scrollWidth - target.clientWidth
+  if (widthCalc > 0) {
+    isScroll.value = true
+  } else {
+    isScroll.value = false
+  }
+}
+function handleAutoScroll(target: any) {
+  widthCalc = target.scrollWidth - target.clientWidth
+  if (widthCalc > 0) {
+    isScroll.value = true
+  } else {
+    isScroll.value = false
+  }
+}
+function handleLeaveScroll() {
+  isScroll.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+.ellipsisScroll {
+  width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  @keyframes roll {
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(-100%);
+    }
+  }
+  &.isScroll {
+    &:hover {
+      width: auto;
+      overflow: initial;
+      animation: 3s roll linear infinite normal;
+    }
+  }
+  &.autoScroll {
+    width: auto;
+    overflow: initial;
+    animation: 3s roll linear infinite normal;
+  }
+}
+</style>

src/components/ellipsisScroll/index.ts

@@ -0,0 +1,2 @@
+import ellipsisScroll from "./ellipsisScroll.vue"
+export default ellipsisScroll

src/views/Editor/CanvasTool/index.vue

@@ -226,8 +226,26 @@
         "
       />
     </Modal>
-    <Modal v-model:visible="cloudCoachVisible" :width="600">
-      <cloudCoachList @update="handleCloudCoach" />
+    <Modal
+      :contentStyle="{
+        width: '70%',
+        minWidth: '1200px',
+        height: '86%',
+        boxShadow: '0px 2px 10px 0px rgba(0,0,0,0.08)',
+        borderRadius: '16px',
+        border: '1px solid #DEDEDE',
+        padding: '0'
+      }"
+      v-model:visible="cloudCoachVisible"
+    >
+      <cloudCoachList
+        @update="handleCloudCoach"
+        @close="
+          () => {
+            cloudCoachVisible = false
+          }
+        "
+      />
     </Modal>
   </div>
 </template>

src/views/components/element/cloudCoachElement/cloudCoachList/cloudCoachList.vue

@@ -1,22 +1,606 @@
 <template>
   <div class="cloudCoachList">
-    <ElButton @click="handleUpdate">点击云教练</ElButton>
+    <div class="headCon">
+      <div class="headLeft">
+        <img class="tipImg" src="@/views/Editor/CanvasTool/imgs/yp.png" alt="" />
+        <div class="title">乐谱</div>
+      </div>
+      <div class="headright">
+        <img @click="emits('close')" class="closeBtn" src="./imgs/close.png" alt="" />
+      </div>
+    </div>
+    <div class="content">
+      <div class="tabTools">
+        <div class="tabCon">
+          <div class="tab" :class="{ active: item.value === querData.tab }" v-for="item in tabData" :key="item.value">{{ item.label }}</div>
+        </div>
+        <div class="query">
+          <Input :placeholder="'请输入搜索关键词'" v-model:value="querData.value">
+            <template #prefix>
+              <img class="img" src="./imgs/query.png" alt="" />
+            </template>
+            <template #suffix>
+              <div class="queryBtn">搜索</div>
+            </template>
+          </Input>
+        </div>
+      </div>
+      <div class="musicListCon">
+        <div class="queryFrom">
+          <div class="queryFromList">
+            <div class="tit">标签：</div>
+            <div class="queryFromCon">
+              <div class="queryTip active">全部</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+            </div>
+          </div>
+          <div class="queryFromList">
+            <div class="tit">标签：</div>
+            <div class="queryFromCon">
+              <div class="queryTip">全部</div>
+              <div class="queryTip active">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <Popover trigger="mouseenter" :offset="-4">
+                <template #content>
+                  <PopoverMenuItem>英式竖笛</PopoverMenuItem>
+                  <PopoverMenuItem>德式竖笛</PopoverMenuItem>
+                </template>
+                <div class="queryTip" :class="{ hoverActive: true }">
+                  <div>我是</div>
+                  <img src="./imgs/jt.png" alt="" />
+                </div>
+              </Popover>
+            </div>
+          </div>
+          <div class="isExpand" :class="{ active: isExpand }">
+            <div>{{ isExpand ? "收起" : "展开" }}</div>
+            <img src="./imgs/jiao.png" alt="" />
+          </div>
+        </div>
+        <!-- <div class="musicList empty"> -->
+        <div class="musicList">
+          <div class="musicListBox">
+            <div class="musicCon">
+              <div class="musicLeft">
+                <div class="iconCon">
+                  <img class="icon" src="" alt="" />
+                  <img class="jxImg" src="./imgs/jx.png" alt="" />
+                </div>
+                <div class="musicInfo">
+                  <EllipsisScroll class="musicTit" :title="'流浪地球流浪地球流浪地球流浪地球'" />
+                  <div class="info">
+                    <div class="hotInfo">
+                      <img src="./imgs/hot.png" alt="" />
+                      <div>1.8万</div>
+                    </div>
+                    <div class="play">演唱</div>
+                    <div class="sing">演奏</div>
+                    <div class="musicUserName">
+                      <EllipsisScroll :title="'耶寒尔'" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="musicRight">
+                <img class="sc" src="./imgs/sc.png" alt="" />
+                <div class="addBtn">添加</div>
+              </div>
+            </div>
+            <div class="musicCon">
+              <div class="musicLeft">
+                <div class="iconCon">
+                  <img class="icon" src="" alt="" />
+                  <img class="jxImg" src="./imgs/jx.png" alt="" />
+                </div>
+                <div class="musicInfo">
+                  <EllipsisScroll class="musicTit" :title="'流浪地球流浪地球流浪地球流浪地球'" />
+                  <div class="info">
+                    <div class="hotInfo">
+                      <img src="./imgs/hot.png" alt="" />
+                      <div>1.8万</div>
+                    </div>
+                    <div class="play">演唱</div>
+                    <div class="sing">演奏</div>
+                    <div class="musicUserName">
+                      <EllipsisScroll :title="'耶寒尔'" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="musicRight">
+                <img class="sc" src="./imgs/sc.png" alt="" />
+                <div class="addBtn">添加</div>
+              </div>
+            </div>
+            <div class="musicCon">
+              <div class="musicLeft">
+                <div class="iconCon">
+                  <img class="icon" src="" alt="" />
+                  <img class="jxImg" src="./imgs/jx.png" alt="" />
+                </div>
+                <div class="musicInfo">
+                  <EllipsisScroll class="musicTit" :title="'流浪地球流浪地球流浪地球流浪地球'" />
+                  <div class="info">
+                    <div class="hotInfo">
+                      <img src="./imgs/hot.png" alt="" />
+                      <div>1.8万</div>
+                    </div>
+                    <div class="play">演唱</div>
+                    <div class="sing">演奏</div>
+                    <div class="musicUserName">
+                      <EllipsisScroll :title="'耶寒尔'" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="musicRight">
+                <img class="sc" src="./imgs/sc.png" alt="" />
+                <div class="addBtn">添加</div>
+              </div>
+            </div>
+            <div class="musicCon">
+              <div class="musicLeft">
+                <div class="iconCon">
+                  <img class="icon" src="" alt="" />
+                  <img class="jxImg" src="./imgs/jx.png" alt="" />
+                </div>
+                <div class="musicInfo">
+                  <EllipsisScroll class="musicTit" :title="'流浪地球流浪地球流浪地球流浪地球'" />
+                  <div class="info">
+                    <div class="hotInfo">
+                      <img src="./imgs/hot.png" alt="" />
+                      <div>1.8万</div>
+                    </div>
+                    <div class="play">演唱</div>
+                    <div class="sing">演奏</div>
+                    <div class="musicUserName">
+                      <EllipsisScroll :title="'耶寒尔'" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="musicRight">
+                <img class="sc" src="./imgs/sc.png" alt="" />
+                <div class="addBtn">添加</div>
+              </div>
+            </div>
+          </div>
+          <!-- <Empty /> -->
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ElButton } from "element-plus"
-const emit = defineEmits<{
+import Input from "@/components/Input.vue"
+import Popover from "@/components/Popover.vue"
+import PopoverMenuItem from "@/components/PopoverMenuItem.vue"
+import Empty from "@/components/Empty"
+import EllipsisScroll from "@/components/ellipsisScroll"
+import { reactive, ref } from "vue"
+
+const emits = defineEmits<{
   (event: "update", id: string): void
+  (event: "close"): void
 }>()
 function handleUpdate() {
-  emit("update", "1760123974848413697")
+  emits("update", "1760123974848413697")
 }
+
+const tabData = [
+  {
+    label: "相关资源",
+    value: "1"
+  },
+  {
+    label: "共享资源",
+    value: "2"
+  },
+  {
+    label: "我的资源",
+    value: "3"
+  },
+  {
+    label: "我的收藏",
+    value: "4"
+  }
+]
+
+const isExpand = ref(true)
+
+const querData = reactive({
+  tab: "1",
+  value: ""
+})
 </script>
 
 <style lang="scss" scoped>
 .cloudCoachList {
   width: 100%;
-  height: 200px;
+  height: 100%;
+  position: relative;
+  &::after {
+    width: 100%;
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100px;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
+    bottom: 0;
+    left: 0;
+  }
+  .headCon {
+    width: 100%;
+    height: 64px;
+    border-bottom: 1px solid #eaeaea;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .headLeft {
+      margin-left: 30px;
+      display: flex;
+      align-items: center;
+      .tipImg {
+        width: 24px;
+        height: 24px;
+      }
+      .title {
+        font-weight: 600;
+        font-size: 18px;
+        color: #131415;
+        margin-left: 8px;
+      }
+    }
+    .headright {
+      margin-right: 30px;
+      display: flex;
+      align-items: center;
+      .closeBtn {
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+        &:hover {
+          opacity: 0.8;
+        }
+      }
+    }
+  }
+  .content {
+    width: 100%;
+    height: calc(100% - 64px);
+    .tabTools {
+      height: 72px;
+      width: 100%;
+      padding: 18px 30px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .tabCon {
+        display: flex;
+        .tab {
+          margin-right: 32px;
+          font-weight: 400;
+          font-size: 16px;
+          color: #8b8d98;
+          line-height: 22px;
+          cursor: pointer;
+          &:hover {
+            opacity: 0.8;
+          }
+          &:last-child {
+            margin-right: 0;
+          }
+          &.active {
+            font-weight: 600;
+            color: #131415;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              width: 100%;
+              height: 10px;
+              background: linear-gradient(90deg, #77bbff 0%, rgba(163, 231, 255, 0.22) 100%);
+              bottom: 0;
+              left: 0;
+              z-index: -1;
+            }
+          }
+        }
+      }
+      .query {
+        width: 400px;
+        height: 36px;
+        &::v-deep(.input) {
+          align-items: center;
+          padding: 0 3px 0 12px;
+          border-radius: 18px;
+          height: 100%;
+          &:not(.disabled):hover,
+          &.focused {
+            .img {
+              opacity: 1;
+            }
+            .queryBtn {
+              opacity: 1;
+            }
+          }
+          input {
+            font-size: 14px;
+          }
+          .img {
+            width: 16px;
+            height: 16px;
+            opacity: 0.4;
+          }
+          .queryBtn {
+            width: 60px;
+            height: 30px;
+            background: #198cfe;
+            border-radius: 16px;
+            font-weight: 500;
+            font-size: 14px;
+            color: #ffffff;
+            line-height: 30px;
+            text-align: center;
+            opacity: 0.4;
+            cursor: pointer;
+            &:hover {
+              opacity: 0.8 !important;
+            }
+          }
+        }
+      }
+    }
+    .musicListCon {
+      width: 100%;
+      height: calc(100% - 72px);
+      overflow: auto;
+      overflow: overlay;
+      display: flex;
+      flex-direction: column;
+      .queryFrom {
+        padding: 0 30px;
+        .queryFromList {
+          display: flex;
+          margin-bottom: 4px;
+          .tit {
+            flex-shrink: 0;
+            font-weight: 500;
+            font-size: 14px;
+            color: #131415;
+            line-height: 32px;
+            margin-right: 16px;
+          }
+          .queryFromCon {
+            display: flex;
+            flex-wrap: wrap;
+            .queryTip {
+              margin: 0 16px 12px 0;
+              font-weight: 400;
+              font-size: 14px;
+              color: rgba(0, 0, 0, 0.6);
+              line-height: 20px;
+              padding: 6px 16px;
+              background: #f5f6fa;
+              border-radius: 6px;
+              cursor: pointer;
+              display: flex;
+              align-items: center;
+              & > img {
+                width: 7px;
+                height: 4px;
+                margin-left: 6px;
+              }
+              &.active,
+              &:hover {
+                background: #d2ecff;
+                color: rgba(0, 0, 0, 1);
+              }
+              &.hoverActive {
+                > img {
+                  transform: rotate(180deg);
+                }
+              }
+            }
+          }
+        }
+        .isExpand {
+          margin-bottom: 16px;
+          cursor: pointer;
+          display: flex;
+          justify-content: center;
+          font-weight: 400;
+          font-size: 14px;
+          color: #198cfe;
+          line-height: 20px;
+          align-items: center;
+          &:hover {
+            opacity: 0.8;
+          }
+          &.active > img {
+            transform: rotate(180deg);
+          }
+          & > img {
+            margin-left: 4px;
+            width: 10px;
+            height: 10px;
+          }
+        }
+      }
+      .musicList {
+        display: flex;
+        padding: 0 30px;
+        &.empty {
+          flex-grow: 1;
+          justify-content: center;
+          align-items: center;
+        }
+        .musicListBox {
+          width: calc(100% + 24px);
+          margin-left: -24px;
+          display: flex;
+          flex-wrap: wrap;
+          .musicCon {
+            margin-bottom: 24px;
+            width: calc(33.3333% - 24px);
+            margin-left: 24px;
+            padding: 16px;
+            background: #f5f6fa;
+            border-radius: 12px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            &:hover {
+              outline: 2px solid #198cfe;
+            }
+            .musicLeft {
+              display: flex;
+              align-items: center;
+              margin-right: 14px;
+              overflow: hidden;
+              .iconCon {
+                position: relative;
+                .icon {
+                  width: 70px;
+                  height: 70px;
+                  border-radius: 8px;
+                }
+                .jxImg {
+                  position: absolute;
+                  left: 0;
+                  top: 0;
+                  width: 34px;
+                  height: 16px;
+                }
+              }
+              .musicInfo {
+                margin-left: 12px;
+                overflow: hidden;
+                .musicTit {
+                  font-weight: 600;
+                  font-size: 15px;
+                  color: #131415;
+                  line-height: 21px;
+                }
+                .info {
+                  margin-top: 13px;
+                  display: flex;
+                  align-items: center;
+                  .hotInfo {
+                    margin-right: 4px;
+                    padding: 0 4px;
+                    background: #fff3f3;
+                    border-radius: 3px;
+                    border: 1px solid rgba(254, 67, 67, 0.5);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    flex-shrink: 0;
+                    line-height: 16px;
+                    & > img {
+                      width: 10px;
+                      height: 12px;
+                    }
+                    & > div {
+                      font-weight: 400;
+                      font-size: 12px;
+                      color: #fe4343;
+                    }
+                  }
+                  .play {
+                    margin-right: 4px;
+                    flex-shrink: 0;
+                    padding: 0 4px;
+                    background: #ffffff;
+                    border-radius: 3px;
+                    border: 1px solid rgba(243, 130, 26, 0.5);
+                    font-weight: 400;
+                    font-size: 12px;
+                    color: #f3821a;
+                    line-height: 16px;
+                    text-align: center;
+                  }
+                  .sing {
+                    margin-right: 4px;
+                    flex-shrink: 0;
+                    padding: 0 4px;
+                    background: #ffffff;
+                    border-radius: 3px;
+                    border: 1px solid rgba(21, 178, 253, 0.5);
+                    font-weight: 400;
+                    font-size: 12px;
+                    color: #00adff;
+                    line-height: 16px;
+                    text-align: center;
+                  }
+                  .musicUserName {
+                    overflow: hidden;
+                    font-weight: 400;
+                    font-size: 13px;
+                    color: #777777;
+                    line-height: 16px;
+                  }
+                }
+              }
+            }
+            .musicRight {
+              flex-shrink: 0;
+              display: flex;
+              align-items: center;
+              .sc {
+                width: 26px;
+                height: 26px;
+                cursor: pointer;
+                &:hover {
+                  opacity: 0.8;
+                }
+              }
+              .addBtn {
+                margin-left: 12px;
+                width: 58px;
+                height: 26px;
+                background: #198cfe;
+                border-radius: 4px;
+                font-weight: 600;
+                font-size: 13px;
+                color: #ffffff;
+                line-height: 26px;
+                text-align: center;
+                cursor: pointer;
+                &:hover {
+                  opacity: 0.8;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 }
 </style>