feat:信息页面

pages.config.ts

@@ -45,7 +45,7 @@ export default defineUniPages({
       {
         icon: '/static/tabbar/user.svg',
         iconShow: '/static/tabbar/macon.svg',
-        pagePath: 'pages/community/community',
+        pagePath: 'pages/myUser/myuser',
         text: '我的',
         iconType: 'local',
       },

src/components/item-form/item-form.vue

@@ -0,0 +1,53 @@
+<template>
+  <view class="w-full bg-white box-border py-[32rpx] px-4" :class="classes">
+    <view
+      class="w-full box-border flex justify-between items-center text-base text-[#333]"
+      :class="labelClass"
+    >
+      <view>
+        <span v-if="required && !requiredRight" class="text-[#FB4848]">*</span>
+        {{ label }}
+        <span v-if="required && requiredRight" class="text-[#FB4848]">*</span>
+      </view>
+      <slot name="value" />
+    </view>
+    <slot name="default" />
+  </view>
+  <view v-if="border" style="border-bottom: 2rpx solid #f2f2f2" class="ml-4"></view>
+</template>
+
+<script setup>
+  defineOptions({
+    name: 'ItemForm',
+  })
+
+  defineProps({
+    classes: {
+      type: String,
+      default: '',
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    labelClass: {
+      type: String,
+      default: '',
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    requiredRight: {
+      type: Boolean,
+      default: false,
+    },
+
+    border: {
+      type: Boolean,
+      default: true,
+    },
+  })
+</script>
+
+<style lang="scss" scoped></style>

src/pages/music/music.vue

@@ -47,7 +47,7 @@
     flex: 1 0 0;
     gap: 10px;
     align-items: center;
-    padding: 10px 12px;
+    padding: 10px 0px;
   }
   .wd-search {
     width: 100%;

src/pages/myUser/component/babyInformation.vue

@@ -0,0 +1,33 @@
+<route lang="json5">
+{
+  style: {
+    navigationStyle: 'custom',
+  },
+}
+</route>
+<template>
+  <view>
+    <headerTitle title="我的宝宝"></headerTitle>
+    <view>
+      <image class="Empty-baby" src="/src/static/icon/Empty.svg"></image>
+    </view>
+    <view class="baby-Bottom"></view>
+  </view>
+</template>
+
+<script setup>
+  import headerTitle from './headerTitle.vue'
+</script>
+
+<style lang="scss" scoped>
+  .Empty-baby {
+    width: 100%;
+    height: calc(100vh - 136px);
+  }
+  .baby-Bottom {
+    display: flex;
+    width: 100%;
+    height: 80px;
+    background: pink;
+  }
+</style>

src/pages/myUser/component/headerTitle.vue

@@ -0,0 +1,56 @@
+<template>
+  <view class="header">
+    <view class="back-button" @click="goBack">
+      <image style="width: 30px; height: 30px" src="/src/static/icon/Left.svg"></image>
+    </view>
+    <view class="header-title">{{ title }}</view>
+    <view class="header-delete" v-if="show">
+      <image class="w-[20px] h-[20px]" src="/src/static/icon/fi-rr-trash.svg"></image>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  const props = defineProps({
+    title: {
+      type: String,
+      required: true,
+    },
+    isShow: {
+      type: Boolean,
+      default: false,
+    },
+  })
+
+  const goBack = () => {
+    uni.navigateBack()
+  }
+</script>
+
+<style lang="scss" scoped>
+  .header {
+    display: flex;
+    height: 44px;
+    padding: 6px 16px;
+    background-color: white;
+  }
+  .back-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .header-title {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    font-weight: 600;
+    color: #333;
+  }
+  .header-delete {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>

src/pages/myUser/component/item-form.vue

@@ -0,0 +1,53 @@
+<template>
+  <view class="w-full bg-white box-border py-[32rpx] px-4" :class="classes">
+    <view
+      class="w-full box-border flex justify-between items-center text-base text-[#333]"
+      :class="labelClass"
+    >
+      <view>
+        <span v-if="required && !requiredRight" class="text-[#FB4848]">*</span>
+        {{ label }}
+        <span v-if="required && requiredRight" class="text-[#FB4848]">*</span>
+      </view>
+      <slot name="value" />
+    </view>
+    <slot name="default" />
+  </view>
+  <view v-if="border" style="border-bottom: 2rpx solid #f2f2f2" class="ml-4"></view>
+</template>
+
+<script setup>
+  defineOptions({
+    name: 'ItemForm',
+  })
+
+  defineProps({
+    classes: {
+      type: String,
+      default: '',
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    labelClass: {
+      type: String,
+      default: '',
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    requiredRight: {
+      type: Boolean,
+      default: false,
+    },
+
+    border: {
+      type: Boolean,
+      default: true,
+    },
+  })
+</script>
+
+<style lang="scss" scoped></style>

src/pages/myUser/component/messageCenter.vue

@@ -0,0 +1,66 @@
+<route lang="json5">
+{
+  style: {
+    navigationStyle: 'custom',
+  },
+}
+</route>
+<template>
+  <view class="message-center">
+    <headerTitle :title="'消息中心'"></headerTitle>
+    <view class="message-container">
+      <view class="message-group">
+        <view class="message-time">13:00</view>
+        <view class="message-card">
+          <view class="message-title">新增关注</view>
+          <view class="message-text">老天爷爷等 (+86 13648597563) 关注宝宝了！</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+  import headerTitle from './headerTitle.vue'
+</script>
+
+<style scoped>
+  .message-center {
+    min-height: 100vh;
+    font-family: 'PingFang SC';
+    font-size: 14px;
+    font-weight: 400;
+    color: #333;
+    background-color: #f2f2f2;
+  }
+
+  .message-container {
+    padding: 16px 12px;
+  }
+
+  .message-time {
+    margin-bottom: 12px;
+    text-align: center;
+  }
+
+  .message-card {
+    padding: 12px 12px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  }
+
+  .message-title {
+    display: flex;
+    align-items: center;
+    height: 35px;
+    border-bottom: 1px solid #f2f2f2;
+  }
+
+  .message-text {
+    display: flex;
+    align-items: center;
+    height: 35px;
+  }
+</style>

src/pages/myUser/component/pickerUser.vue

@@ -0,0 +1,42 @@
+<template>
+  <wd-picker
+    :columns="columns"
+    :title="title"
+    :v-model="value"
+    :is-show="isShow"
+    size="large"
+    @confirm="handleConfirm"
+  />
+</template>
+
+<script setup>
+  import { ref, defineEmits } from 'vue'
+
+  const props = defineProps({
+    columns: {
+      type: Array,
+      required: true,
+    },
+    value: {
+      type: [String, Number],
+      default: '',
+    },
+    title: {
+      type: String,
+      default: '请选择',
+    },
+  })
+  // 定义事件
+  const emit = defineEmits(['update:value', 'confirm'])
+  // 处理 Picker 确认操作
+  const handleConfirm = (value) => {
+    emit('update:value', value)
+    emit('confirm', value)
+  }
+</script>
+
+<style scoped lang="scss">
+  ::v-deep .wd-picker__cell {
+    padding: 6px 0px;
+  }
+</style>

src/pages/myUser/component/setFocus.vue

@@ -0,0 +1,150 @@
+<route lang="json5">
+{
+  style: {
+    navigationStyle: 'custom',
+  },
+}
+</route>
+<template>
+  <view class="container">
+    <headerTitle :title="'个人信息'" />
+
+    <view class="content">
+      <!-- 头像 -->
+      <view class="section" @click="pictureBtn">
+        <view class="gender-container">
+          <view class="label">头像</view>
+          <view class="gender">点击可查看</view>
+        </view>
+        <View class="avatar">
+          <image :src="userAvatar" class="avatar-image" />
+        </View>
+        <view>
+          <image style="width: 24px; height: 24px" src="/src/static/icon/chevron-right.svg" />
+        </view>
+      </view>
+
+      <!-- 昵称 -->
+      <view class="section" @click="nicknameBtn">
+        <view class="section-left">
+          <view class="label">昵称</view>
+          <view class="nickname">{{ nickname }}</view>
+        </view>
+      </view>
+
+      <!-- 性别 -->
+      <ItemForm label="性别">
+        <template #default>
+          <pickerUser :columns="columns" :value="value" :title="gender" @confirm="handleConfirm" />
+        </template>
+      </ItemForm>
+
+      <!-- 生日 -->
+      <ItemForm label="生日">
+        <template #default>
+          <pickerUser :columns="columns" :value="value" :title="gender" @confirm="handleConfirm" />
+        </template>
+      </ItemForm>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+  import headerTitle from './headerTitle.vue'
+  import pickerUser from './pickerUser.vue'
+  import ItemForm from './item-form.vue'
+  const columns = ref(['男', '女', '保密'])
+  const value = ref('男')
+  const gender = ref('选择性别')
+
+  function handleConfirm(value) {
+    console.log('选择的值：', value)
+    // 处理确认后的操作
+  }
+
+  const userAvatar = ref(
+    'https://ai-public.mastergo.com/ai/img_res/6e500f9fbe00a9cbad23aa49c6a2830b.jpg',
+  )
+  const nickname = ref('小奥特曼的爸爸')
+
+  // 点击头像
+  const pictureBtn = () => {
+    console.log('点击头像')
+  }
+  // 点击昵称
+  const nicknameBtn = () => {
+    console.log('点击昵称')
+  }
+  // 点击性别
+  const genderBtn = () => {
+    console.log('点击性别')
+  }
+  // 点击生日
+  const birthdayBtn = () => {
+    console.log('点击生日')
+  }
+</script>
+
+<style lang="scss" scoped>
+  .container {
+    min-height: 100vh;
+    background-color: #f2f2f2;
+  }
+
+  .content {
+    background-color: #ffffff;
+  }
+
+  .section {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px;
+    border-bottom: 1px solid #f1f5f9;
+  }
+
+  .section-left {
+    width: 100%;
+    height: 60px;
+  }
+
+  .label {
+    height: 30px;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+  }
+
+  .avatar {
+    width: 52px;
+    height: 48px;
+    margin-right: 16px;
+    overflow: hidden;
+    border-radius: 50%;
+  }
+
+  .avatar-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .gender-container {
+    width: 100%;
+  }
+
+  .nickname {
+    display: flex;
+    align-items: center;
+    height: 30px;
+    font-family: 'PingFang SC';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+  }
+  .gender {
+    padding: 5px 0px;
+  }
+</style>

src/pages/myUser/myuser.vue

@@ -2,18 +2,145 @@
 {
   layout: 'tabbar',
   style: {
+    navigationStyle: 'custom',
     navigationBarTitleText: '%tabbar.myuser%',
   },
 }
 </route>
-<script setup lang="ts">
-  const { safeAreaInsets } = uni.getSystemInfoSync()
-</script>
+
 <template>
-  <view
-    class="pb-tab bg-white overflow-hidden box-border"
-    :style="{ marginTop: safeAreaInsets?.top + 'px' }"
-  >
-    我的嗷嗷
+  <view class="container">
+    <!-- 头像 -->
+    <view class="profile-section">
+      <view class="avatar-container" @click="modifyBtn">
+        <image :src="userInfo.avatar" class="avatar" mode="aspectFill" />
+        <view class="avatar-badge">
+          <image style="width: 26px; height: 26px" src="/src/static/icon/modify.svg"></image>
+        </view>
+      </view>
+      <text class="user-id">{{ userInfo.id }}</text>
+    </view>
+
+    <!-- 菜单列表 -->
+    <view class="menu-list">
+      <view
+        v-for="(item, index) in menuItems"
+        :key="index"
+        class="menu-item"
+        @click="handleMenuClick(item.key, index)"
+      >
+        <image style="width: 24px; height: 24px" :src="item.icon"></image>
+        <view class="menu-label">{{ item.label }}</view>
+        <image style="width: 24px; height: 24px; margin-right: 15px" :src="item.right"></image>
+      </view>
+    </view>
   </view>
 </template>
+
+<script setup>
+  import { ref } from 'vue'
+
+  const userInfo = ref({
+    id: '199****3465',
+    avatar: 'https://ai-public.mastergo.com/ai/img_res/522a9d6767d9f1ad533cf624f7dd95ea.jpg',
+  })
+  const menuItems = ref([
+    {
+      key: 'baby',
+      label: '我的宝宝',
+      icon: '/src/static/icon/fi-rr-child-head.svg',
+      right: '/src/static/icon/chevron-right.svg',
+    },
+    {
+      key: 'notification',
+      label: '消息通知',
+      icon: '/src/static/icon/fi-rr-bell.svg',
+      right: '/src/static/icon/chevron-right.svg',
+    },
+    {
+      key: 'settings',
+      label: '设置中心',
+      icon: '/src/static/icon/setup.svg',
+      right: '/src/static/icon/chevron-right.svg',
+    },
+  ])
+  //  页面跳转
+  const handleMenuClick = (item, index) => {
+    console.log('Clicked menu item:', item, index)
+    if (item === 'baby') {
+      uni.navigateTo({
+        url: '/pages/myUser/component/babyInformation',
+      })
+    } else if (item === 'notification') {
+      uni.navigateTo({
+        url: '/pages/myUser/component/messageCenter',
+      })
+    } else if (item === 'settings') {
+      uni.navigateTo({
+        url: '/pages/myUser/component/setFocus',
+      })
+    }
+  }
+  const modifyBtn = () => {
+    console.log('修改头像')
+  }
+</script>
+
+<style scoped>
+  .container {
+    min-height: 100vh;
+    font-size: 16px;
+    background-color: #f9fafb;
+  }
+
+  .profile-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 175px;
+    padding: 36px 16px 0px 16px;
+  }
+
+  .avatar-container {
+    position: relative;
+  }
+
+  .avatar {
+    width: 88px;
+    height: 88px;
+    border-radius: 50%;
+  }
+
+  .avatar-badge {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    background: #f88842;
+    border-radius: 24px;
+  }
+
+  .user-id {
+    margin-top: 0.75rem;
+    color: #4b5563;
+  }
+
+  .menu-list {
+    padding: 16px;
+  }
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    cursor: pointer;
+    border-bottom: 1px solid #e5e7eb;
+  }
+  .menu-label {
+    flex: 1;
+    margin-left: 0.75rem;
+    color: #374151;
+  }
+</style>

src/pages/user/login.vue

@@ -13,27 +13,42 @@
         <view class="title-en">Hello!</view>
         <view class="title-en">欢迎登录橙宝日志</view>
       </view>
-
+      <!--  输入框-->
       <view class="input-wrapper">
-        <view class="phone-input">
-          <view class="country-code">
-            <span>+86</span>
-            <i class="fa-chevron-down"></i>
+        <!-- 账号 -->
+        <view class="country-code">
+          <view class="country-phone">
+            <image style="width: 24px; height: 24px" src="/src/static/icon/phone.svg"></image>
+            <view class="login-text">手机号</view>
+          </view>
+          <view class="phone-input">
+            <view>+86</view>
+            <view>
+              <input v-model="account" type="text" placeholder="请输入手机号" />
+            </view>
           </view>
-          <input v-model="account" type="text" placeholder="请输入手机号" />
         </view>
-
-        <view class="verify-input">
-          <i class="input-icon">
+        <!-- 验证码 -->
+        <view class="country-password">
+          <view class="country-phone">
             <image
               style="width: 24px; height: 24px"
-              src="/src/static/icon/login_password.svg"
+              src="/src/static/icon/Verification.svg"
             ></image>
-          </i>
-          <input type="password" placeholder="请输入验证码" v-model="password" />
-          <button class="send-btn" :disabled="isCountingDown" @click="sendVerificationCode">
-            {{ buttonText }}
-          </button>
+            <view class="login-text">验证码</view>
+          </view>
+          <view class="phone-input">
+            <view class="verification-input">
+              <input v-model="verification" type="text" placeholder="请输入验证码" />
+            </view>
+            <image
+              style="width: 1px; height: 16px; background: red"
+              src="/src/static/icon/textBor.svg"
+            ></image>
+            <view class="send-btn" :disabled="isCountingDown" @click="sendVerificationCode">
+              {{ buttonText }}
+            </view>
+          </view>
         </view>
       </view>
 
@@ -45,7 +60,7 @@
 <script setup>
   import { ref } from 'vue'
   const account = ref('') // 账号
-  const password = ref('') // 密码
+  const verification = ref('') // 验证码
   const countdown = ref(0)
   const isCountingDown = ref(false)
 
@@ -55,7 +70,7 @@
 
   // 点击登录
   const loginBtn = () => {
-    console.log(account.value, password.value)
+    console.log(account.value, verification.value)
     console.log(2222)
   }
 
@@ -84,6 +99,13 @@
 
   .login-box {
     width: 90%;
+    font-size: 1rem;
+  }
+
+  .login_title {
+    width: 100%;
+    height: 4.5rem;
+    margin: 6.25rem 0 1.25rem 0;
   }
 
   .title-en {
@@ -94,106 +116,63 @@
     color: #333333;
   }
 
-  .login_title {
-    width: 100%;
-    height: 4.5rem;
-    margin: 6.25rem 0 1.25rem 0rem;
-  }
-
   .input-wrapper {
     position: relative;
     width: 100%;
-    height: 7.75rem;
-    margin: 0.625rem 0 1.25rem 0rem;
+    height: 11.25rem;
+    margin: 0.625rem 0 1.25rem 0;
   }
 
-  .login-button {
+  .country-code {
     width: 100%;
-    height: 3rem;
-    margin: 5rem 0 1.25rem 0rem;
-    font-size: 1rem;
-    color: white;
-    background: #50b3ff !important;
-    border: none;
-    border-radius: 0.5rem;
+    height: 5rem;
+    padding: 1rem 0;
   }
 
   .phone-input {
     display: flex;
+    gap: 1rem;
     align-items: center;
-    margin-bottom: 1rem;
-    background: #fff;
-    border: 0.0625rem solid #ccc;
-    border-radius: 0.5rem;
+    height: 3.5rem;
+    border-bottom: 0.03125rem solid var(--Gray-Gray3, #e7e7e7);
   }
 
-  .country-code {
+  .country-phone {
     display: flex;
     align-items: center;
-    padding: 0 1rem;
-    font-size: 0.875rem;
-    color: #333;
-    border-right: 0.0625rem solid #e8e8e8;
   }
 
-  .country-code i {
-    margin-left: 0.25rem;
-    font-size: 0.75rem;
-    color: #999;
+  .login-text {
+    margin-left: 0.625rem;
   }
 
   .phone-input input {
     flex: 1;
-    height: 3rem;
     padding: 0 1rem;
     font-size: 0.875rem;
-    background: transparent;
-    border: none;
   }
 
-  .verify-input {
-    position: relative;
-    display: flex;
-    background: #fff;
-    border: 0.0625rem solid #ccc;
-    border-radius: 0.5rem;
-  }
-
-  .input-icon {
-    position: absolute;
-    top: 50%;
-    left: 1rem;
-    color: #999;
-    transform: translateY(-50%);
-  }
-
-  .verify-input input {
-    width: 100%;
-    height: 3rem;
-    padding: 0 1rem 0 3rem;
-    font-size: 0.875rem;
-    background: transparent;
-    border: none;
+  .verification-input {
+    width: 27.75rem;
   }
 
   .send-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 8.75rem;
+    width: 13.75rem;
     overflow: hidden;
-    font-size: 0.75rem;
-    color: #409eff;
+    font-size: 0.875rem;
+    color: #f88842;
     text-overflow: ellipsis;
     white-space: nowrap;
     background: transparent;
   }
 
-  // .send-btn:hover:not(:disabled) {
-  //   color: #66b1ff;
-  // }
-  // .send-btn:disabled {
-  //   color: #c0c4cc;
-  //   cursor: not-allowed;
-  // }
+  .login-button {
+    width: 100%;
+    height: 3rem;
+    margin: 5rem 0 1.25rem 0;
+    font-size: 1rem;
+    color: white;
+    background: #f88842 !important;
+    border-radius: 0.5rem;
+  }
 </style>

src/static/icon/Verification.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame">
+<g id="Group 1280">
+<g id="Group 1279">
+<path id="Vector" d="M4.00003 5.24323L11.6865 3L19.3657 5.24323V9.84357C19.3657 14.6788 16.2713 18.9715 11.684 20.5C7.0954 18.9715 4.00003 14.6779 4.00003 9.84143V5.24323Z" stroke="#333333" stroke-width="1.5" stroke-linejoin="round"/>
+<path id="Vector_2" d="M7.84147 11.1097L10.8292 14.0975L15.9511 8.97559" stroke="#333333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+</g>
+</svg>

src/static/icon/chevron-right.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="chevron-right">
+<path id="union" fill-rule="evenodd" clip-rule="evenodd" d="M9.69064 18.6885L8.31178 17.3096L13.6223 11.999L8.31178 6.68848L9.69064 5.30962L16.3801 11.999L9.69064 18.6885Z" fill="black" fill-opacity="0.4"/>
+</g>
+</svg>

src/static/icon/fi-rr-bell.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="fi-rr-bell" clip-path="url(#clip0_543_12336)">
+<path id="Vector" d="M22.5691 13.6597L20.6691 6.82374C20.1122 4.82107 18.9019 3.06202 17.2305 1.82621C15.5591 0.59039 13.5226 -0.0512763 11.4446 0.00320383C9.36666 0.0576839 7.36655 0.805184 5.76221 2.12689C4.15786 3.44859 3.04135 5.26864 2.59014 7.29774L1.11914 13.9127C0.956657 14.6437 0.960414 15.4018 1.13013 16.1311C1.29986 16.8603 1.63121 17.5422 2.09972 18.1263C2.56824 18.7104 3.16196 19.1818 3.83705 19.5057C4.51214 19.8296 5.25137 19.9978 6.00014 19.9977H7.11414C7.34366 21.128 7.95687 22.1442 8.84988 22.8741C9.7429 23.604 10.8608 24.0028 12.0141 24.0028C13.1675 24.0028 14.2854 23.604 15.1784 22.8741C16.0714 22.1442 16.6846 21.128 16.9141 19.9977H17.7521C18.523 19.9978 19.2833 19.8196 19.9739 19.4772C20.6645 19.1347 21.2665 18.6372 21.733 18.0236C22.1994 17.41 22.5177 16.6968 22.6629 15.9398C22.8082 15.1828 22.7754 14.4024 22.5691 13.6597ZM12.0141 21.9977C11.3959 21.9952 10.7935 21.8017 10.2894 21.4436C9.78537 21.0856 9.40423 20.5806 9.19814 19.9977H14.8301C14.6241 20.5806 14.2429 21.0856 13.7388 21.4436C13.2348 21.8017 12.6324 21.9952 12.0141 21.9977ZM20.1401 16.8127C19.8615 17.1824 19.5005 17.482 19.0857 17.6877C18.671 17.8934 18.2141 17.9996 17.7511 17.9977H6.00014C5.55093 17.9977 5.10746 17.8967 4.70248 17.7023C4.2975 17.5079 3.94135 17.2251 3.6603 16.8746C3.37926 16.5242 3.1805 16.1151 3.0787 15.6776C2.9769 15.2401 2.97466 14.7852 3.07214 14.3467L4.54214 7.73074C4.89649 6.13694 5.77345 4.70734 7.0336 3.66919C8.29375 2.63103 9.86477 2.04391 11.4969 2.00115C13.1291 1.95839 14.7287 2.46245 16.0414 3.43321C17.3542 4.40396 18.3048 5.78568 18.7421 7.35874L20.6421 14.1947C20.7677 14.6401 20.7877 15.1086 20.7005 15.5631C20.6134 16.0175 20.4215 16.4454 20.1401 16.8127Z" fill="#FFAC78"/>
+<path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M12 24C10.9022 23.9949 9.83269 23.6078 8.93768 22.8918C8.04267 22.1758 7.36591 21.1658 7 20H9.2C9.40491 20.5829 9.78389 21.0879 10.2851 21.4459C10.7863 21.8039 11.3852 21.9974 12 22C12.6147 21.9974 13.2137 21.8039 13.7149 21.4459C14.2161 21.0879 14.5951 20.5829 14.8 20H17C16.6341 21.1658 15.9573 22.1758 15.0623 22.8918C14.1673 23.6078 13.0978 23.9949 12 24Z" fill="#F88842"/>
+</g>
+<defs>
+<clipPath id="clip0_543_12336">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/static/icon/fi-rr-trash.svg

@@ -0,0 +1,12 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="fi-rr-trash" clip-path="url(#clip0_188_45503)">
+<path id="Vector" d="M17.4998 3.33333H14.9165C14.7231 2.39284 14.2114 1.54779 13.4675 0.940598C12.7237 0.333408 11.7933 0.0012121 10.8332 0L9.1665 0C8.20633 0.0012121 7.27594 0.333408 6.53213 0.940598C5.78832 1.54779 5.27658 2.39284 5.08317 3.33333H2.49984C2.27882 3.33333 2.06686 3.42113 1.91058 3.57741C1.7543 3.73369 1.6665 3.94565 1.6665 4.16667C1.6665 4.38768 1.7543 4.59964 1.91058 4.75592C2.06686 4.9122 2.27882 5 2.49984 5H3.33317V15.8333C3.33449 16.938 3.77391 17.997 4.55502 18.7782C5.33614 19.5593 6.39517 19.9987 7.49984 20H12.4998C13.6045 19.9987 14.6635 19.5593 15.4447 18.7782C16.2258 17.997 16.6652 16.938 16.6665 15.8333V5H17.4998C17.7208 5 17.9328 4.9122 18.0891 4.75592C18.2454 4.59964 18.3332 4.38768 18.3332 4.16667C18.3332 3.94565 18.2454 3.73369 18.0891 3.57741C17.9328 3.42113 17.7208 3.33333 17.4998 3.33333ZM9.1665 1.66667H10.8332C11.3501 1.6673 11.8541 1.82781 12.2762 2.1262C12.6983 2.42459 13.0177 2.84624 13.1907 3.33333H6.809C6.98199 2.84624 7.30142 2.42459 7.72349 2.1262C8.14556 1.82781 8.64961 1.6673 9.1665 1.66667ZM14.9998 15.8333C14.9998 16.4964 14.7364 17.1323 14.2676 17.6011C13.7988 18.0699 13.1629 18.3333 12.4998 18.3333H7.49984C6.8368 18.3333 6.20091 18.0699 5.73207 17.6011C5.26323 17.1323 4.99984 16.4964 4.99984 15.8333V5H14.9998V15.8333Z" fill="#FB4848"/>
+<path id="Vector_2" d="M8.33333 14.9997C8.55434 14.9997 8.76631 14.9119 8.92259 14.7556C9.07887 14.5993 9.16666 14.3873 9.16666 14.1663V9.16634C9.16666 8.94533 9.07887 8.73337 8.92259 8.57709C8.76631 8.42081 8.55434 8.33301 8.33333 8.33301C8.11232 8.33301 7.90036 8.42081 7.74408 8.57709C7.5878 8.73337 7.5 8.94533 7.5 9.16634V14.1663C7.5 14.3873 7.5878 14.5993 7.74408 14.7556C7.90036 14.9119 8.11232 14.9997 8.33333 14.9997Z" fill="#FB4848"/>
+<path id="Vector_3" d="M11.6663 14.9997C11.8874 14.9997 12.0993 14.9119 12.2556 14.7556C12.4119 14.5993 12.4997 14.3873 12.4997 14.1663V9.16634C12.4997 8.94533 12.4119 8.73337 12.2556 8.57709C12.0993 8.42081 11.8874 8.33301 11.6663 8.33301C11.4453 8.33301 11.2334 8.42081 11.0771 8.57709C10.9208 8.73337 10.833 8.94533 10.833 9.16634V14.1663C10.833 14.3873 10.9208 14.5993 11.0771 14.7556C11.2334 14.9119 11.4453 14.9997 11.6663 14.9997Z" fill="#FB4848"/>
+</g>
+<defs>
+<clipPath id="clip0_188_45503">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/static/icon/modify.svg

@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame">
+<path id="Vector" d="M1.75 7.43705C1.74996 7.37698 1.76229 7.31754 1.78623 7.26244C1.81017 7.20735 1.84519 7.15777 1.88912 7.1168L8.45163 0.991797C8.53456 0.914336 8.64435 0.87213 8.75781 0.874089C8.87128 0.876048 8.97954 0.922019 9.05975 1.0023L11.6847 3.6273C11.7264 3.66887 11.7592 3.7184 11.7812 3.77294C11.8032 3.82748 11.814 3.8859 11.813 3.94472C11.8119 4.00353 11.799 4.06152 11.775 4.11523C11.751 4.16894 11.7165 4.21726 11.6734 4.2573L5.11088 10.3823C5.02983 10.4577 4.92321 10.4996 4.8125 10.4995H2.1875C2.07147 10.4995 1.96019 10.4535 1.87814 10.3714C1.79609 10.2894 1.75 10.1781 1.75 10.062V7.43705ZM2.625 7.62692V9.62455H4.64013L10.745 3.92655L8.7395 1.92017L2.625 7.62692ZM0.875 12.687V11.812H13.125V12.687H0.875Z" fill="white" stroke="white" stroke-width="0.2"/>
+</g>
+</svg>

src/static/icon/note.svg

@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame">
+<path id="Vector" d="M1.75 7.43705C1.74996 7.37698 1.76229 7.31754 1.78623 7.26244C1.81017 7.20735 1.84519 7.15777 1.88912 7.1168L8.45163 0.991797C8.53456 0.914336 8.64435 0.87213 8.75781 0.874089C8.87128 0.876048 8.97954 0.922019 9.05975 1.0023L11.6847 3.6273C11.7264 3.66887 11.7592 3.7184 11.7812 3.77294C11.8032 3.82748 11.814 3.8859 11.813 3.94472C11.8119 4.00353 11.799 4.06152 11.775 4.11523C11.751 4.16894 11.7165 4.21726 11.6734 4.2573L5.11088 10.3823C5.02983 10.4577 4.92321 10.4996 4.8125 10.4995H2.1875C2.07147 10.4995 1.96019 10.4535 1.87814 10.3714C1.79609 10.2894 1.75 10.1781 1.75 10.062V7.43705ZM2.625 7.62692V9.62455H4.64013L10.745 3.92655L8.7395 1.92017L2.625 7.62692ZM0.875 12.687V11.812H13.125V12.687H0.875Z" fill="white" stroke="white" stroke-width="0.2"/>
+</g>
+</svg>

src/static/icon/phone.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#230;&#137;&#139;&#230;&#156;&#186;">
+<path id="Vector" d="M17.5 4H5.5C4.67157 4 4 4.67157 4 5.5V19.5C4 20.3284 4.67157 21 5.5 21H17.5C18.3284 21 19 20.3284 19 19.5V5.5C19 4.67157 18.3284 4 17.5 4Z" stroke="#333333" stroke-width="1.5"/>
+<path id="Vector_2" d="M9.5 17H13.5" stroke="#333333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/static/icon/textBor.svg

@@ -0,0 +1,3 @@
+<svg width="1" height="16" viewBox="0 0 1 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1" height="16" fill="#E7E7E7"/>
+</svg>