feat：概览

src/views/count/main/trend/icons/icon1.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" rx="14" fill="#167AF0" fill-opacity="0.1"/>
+</svg>

src/views/count/main/trend/icons/icon2.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" rx="14" fill="#167AF0" fill-opacity="0.1"/>
+</svg>

src/views/count/main/trend/icons/icon3.svg

@@ -0,0 +1,9 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" rx="14" fill="#167AF0" fill-opacity="0.1"/>
+<rect x="13" y="13" width="5.7895" height="5.7895" fill="#167AF0"/>
+<rect x="21.1053" y="13" width="5.7895" height="5.7895" fill="#167AF0"/>
+<rect x="29.2106" y="13" width="5.7895" height="5.7895" fill="#167AF0"/>
+<rect x="13" y="21.1055" width="5.7895" height="5.7895" fill="#167AF0"/>
+<rect x="21.1053" y="21.1055" width="5.7895" height="5.7895" fill="#167AF0"/>
+<rect x="13" y="29.2104" width="5.7895" height="5.7895" fill="#167AF0"/>
+</svg>

src/views/count/main/trend/icons/icon4.svg

@@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" rx="14" fill="#167AF0" fill-opacity="0.1"/>
+<path d="M23.9571 12C17.354 12 12 17.354 12 23.9571C12 30.5601 17.354 35.9145 23.9571 35.9145C30.5601 35.9145 35.9142 30.5604 35.9142 23.9571C35.9142 17.3537 30.5628 12 23.9571 12ZM31.2071 31.2091C29.4085 33.0045 27.0059 34.0658 24.4675 34.1863C21.9292 34.3069 19.4368 33.4779 17.4763 31.8611C15.5157 30.2442 14.2274 27.9553 13.8625 25.4404C13.4975 22.9255 14.082 20.3648 15.5021 18.2573C16.9221 16.1499 19.076 14.6466 21.544 14.0406C24.0119 13.4346 26.6171 13.7692 28.8517 14.9793C31.0864 16.1893 32.7905 18.188 33.6319 20.5859C34.4733 22.9839 34.3917 25.6092 33.403 27.9502C32.889 29.1685 32.1432 30.2753 31.2071 31.2091Z" fill="#167AF0"/>
+<path d="M23.9571 15.1494C19.0904 15.1494 15.1495 19.0915 15.1495 23.9571C15.1495 28.8226 19.0915 32.7647 23.9571 32.7647C28.8227 32.7647 32.7648 28.822 32.7648 23.9574C32.7648 19.0927 28.8227 15.1494 23.9571 15.1494ZM28.3876 24.1707H23.1218C22.8882 24.1705 22.6643 24.0776 22.4992 23.9125C22.3341 23.7474 22.2412 23.5235 22.241 23.29V18.0267C22.241 17.7931 22.3338 17.5691 22.499 17.4039C22.6641 17.2388 22.8882 17.146 23.1218 17.146C23.3553 17.146 23.5794 17.2388 23.7445 17.4039C23.9097 17.5691 24.0025 17.7931 24.0025 18.0267V22.4092H28.3879C28.6215 22.4092 28.8456 22.502 29.0107 22.6672C29.1759 22.8323 29.2687 23.0564 29.2687 23.29C29.2687 23.5235 29.1759 23.7476 29.0107 23.9127C28.8456 24.0779 28.6215 24.1707 28.3879 24.1707H28.3876Z" fill="#167AF0"/>
+</svg>

src/views/count/main/trend/icons/icon5.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" rx="14" fill="#167AF0" fill-opacity="0.1"/>
+<path d="M20.3407 23.8579C20.3735 23.8367 20.4215 23.7987 20.4359 23.7893C20.4588 23.7802 20.4651 23.7668 20.5132 23.7314C20.7243 23.5845 20.9395 23.4438 21.1618 23.3155C19.794 22.2226 18.9643 20.6033 18.9643 18.8329C18.9647 18.2144 19.0691 17.6001 19.2737 17.0136C19.1694 17.0052 19.0652 16.9985 18.9583 16.9985C16.8793 16.9985 15.1938 18.5772 15.1938 20.5238C15.1938 22.0874 16.281 23.411 17.7849 23.873C15.0488 24.5812 13 27.4363 13 30.6917C13 30.7544 14.2973 30.7328 16.1629 30.7121C16.6786 27.8906 18.21 25.4137 20.3407 23.8579ZM26.1968 30.8148C26.1968 28.163 28.2591 25.9707 30.9221 25.6283C29.8211 24.5086 28.4685 23.7062 26.9726 23.3754C28.9635 22.7052 30.3902 20.927 30.3902 18.8328C30.3901 16.1641 28.0775 14 25.2259 14C22.3734 14 20.0612 16.1641 20.0612 18.8328C20.0612 20.9846 21.5656 22.8064 23.6428 23.4316C19.8829 24.3963 17.0662 28.3292 17.0662 32.8097C17.0662 32.8529 17.5074 32.8671 18.2665 32.8671C19.784 32.8671 22.5741 32.8097 25.6517 32.8097C25.9768 32.8097 26.2961 32.81 26.6094 32.8106C26.3366 32.1778 26.1964 31.4996 26.1968 30.8148ZM31.6466 26.6305C29.2465 26.6305 27.2937 28.5081 27.2937 30.8153C27.2937 33.1224 29.2465 35 31.6466 35C34.0468 35 36 33.1224 36 30.8153C36 28.5081 34.0468 26.6305 31.6466 26.6305ZM33.6578 31.5182H31.8295C31.6839 31.5181 31.5444 31.4625 31.4415 31.3637C31.3387 31.2648 31.2809 31.1308 31.2809 30.991C31.2812 30.9594 31.2846 30.9279 31.2912 30.8969C31.2845 30.826 31.2809 30.7418 31.2809 30.6396V28.1795C31.2809 28.0398 31.3387 27.9058 31.4416 27.807C31.5444 27.7083 31.684 27.6528 31.8294 27.6528C31.9749 27.6528 32.1144 27.7083 32.2173 27.807C32.3201 27.9058 32.3779 28.0398 32.3779 28.1795V30.4638H33.6577C33.8027 30.4648 33.9414 30.5207 34.0436 30.6195C34.1458 30.7183 34.2031 30.8518 34.2031 30.991C34.2031 31.1302 34.1458 31.2638 34.0436 31.3626C33.9414 31.4613 33.8027 31.5173 33.6577 31.5183" fill="#167AF0"/>
+</svg>

src/views/count/main/trend/icons/icon6.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" rx="14" fill="#167AF0" fill-opacity="0.1"/>
+<path d="M20.3407 23.8579C20.3735 23.8367 20.4215 23.7987 20.4359 23.7893C20.4588 23.7802 20.4651 23.7668 20.5132 23.7314C20.7243 23.5845 20.9395 23.4438 21.1618 23.3155C19.794 22.2226 18.9643 20.6033 18.9643 18.8329C18.9647 18.2144 19.0691 17.6001 19.2737 17.0136C19.1694 17.0052 19.0652 16.9985 18.9583 16.9985C16.8793 16.9985 15.1938 18.5772 15.1938 20.5238C15.1938 22.0874 16.281 23.411 17.7849 23.873C15.0488 24.5812 13 27.4363 13 30.6917C13 30.7544 14.2973 30.7328 16.1629 30.7121C16.6786 27.8906 18.21 25.4137 20.3407 23.8579ZM26.1968 30.8148C26.1968 28.163 28.2591 25.9707 30.9221 25.6283C29.8211 24.5086 28.4685 23.7062 26.9726 23.3754C28.9635 22.7052 30.3902 20.927 30.3902 18.8328C30.3901 16.1641 28.0775 14 25.2259 14C22.3734 14 20.0612 16.1641 20.0612 18.8328C20.0612 20.9846 21.5656 22.8064 23.6428 23.4316C19.8829 24.3963 17.0662 28.3292 17.0662 32.8097C17.0662 32.8529 17.5074 32.8671 18.2665 32.8671C19.784 32.8671 22.5741 32.8097 25.6517 32.8097C25.9768 32.8097 26.2961 32.81 26.6094 32.8106C26.3366 32.1778 26.1964 31.4996 26.1968 30.8148ZM31.6466 26.6305C29.2465 26.6305 27.2937 28.5081 27.2937 30.8153C27.2937 33.1224 29.2465 35 31.6466 35C34.0468 35 36 33.1224 36 30.8153C36 28.5081 34.0468 26.6305 31.6466 26.6305ZM33.6578 31.5182H31.8295C31.6839 31.5181 31.5444 31.4625 31.4415 31.3637C31.3387 31.2648 31.2809 31.1308 31.2809 30.991C31.2812 30.9594 31.2846 30.9279 31.2912 30.8969C31.2845 30.826 31.2809 30.7418 31.2809 30.6396V28.1795C31.2809 28.0398 31.3387 27.9058 31.4416 27.807C31.5444 27.7083 31.684 27.6528 31.8294 27.6528C31.9749 27.6528 32.1144 27.7083 32.2173 27.807C32.3201 27.9058 32.3779 28.0398 32.3779 28.1795V30.4638H33.6577C33.8027 30.4648 33.9414 30.5207 34.0436 30.6195C34.1458 30.7183 34.2031 30.8518 34.2031 30.991C34.2031 31.1302 34.1458 31.2638 34.0436 31.3626C33.9414 31.4613 33.8027 31.5173 33.6577 31.5183" fill="#167AF0"/>
+</svg>

src/views/count/main/trend/icons/icon7.svg

@@ -0,0 +1,13 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" rx="14" fill="#167AF0" fill-opacity="0.1"/>
+<g clip-path="url(#clip0_561_3826)">
+<path d="M32.8016 14.1146H30.6014V13.0107H28.4012V14.1146H19.6006V13.0107H17.4002V14.1146H15.2002C14.6167 14.1146 14.057 14.3464 13.6444 14.759C13.2318 15.1716 13 15.7313 13 16.3148V32.7893C13.0001 33.3728 13.2319 33.9324 13.6445 34.3449C14.0571 34.7575 14.6167 34.9893 15.2002 34.9893H32.8016C33.3851 34.9892 33.9446 34.7574 34.3571 34.3449C34.7697 33.9323 35.0015 33.3728 35.0016 32.7893V16.3148C35.0016 15.7313 34.7698 15.1717 34.3572 14.7591C33.9447 14.3465 33.3851 14.1147 32.8016 14.1146ZM32.1442 32.9902H15.8574C15.6055 32.9902 15.3639 32.8901 15.1857 32.712C15.0076 32.5338 14.9075 32.2922 14.9075 32.0403V20.5146H33.0943V32.04C33.0944 32.1648 33.0698 32.2884 33.0221 32.4037C32.9743 32.519 32.9044 32.6237 32.8161 32.712C32.7279 32.8002 32.6231 32.8702 32.5078 32.9179C32.3925 32.9657 32.269 32.9902 32.1442 32.9902Z" fill="#167AF0"/>
+<path d="M24.0579 29.0869C24.1373 28.6748 24.3302 28.2931 24.6149 27.9847C25.0035 27.565 25.5211 27.3339 26.0722 27.3339C26.6234 27.3339 27.1407 27.5648 27.5296 27.9847C27.6696 28.1373 27.7879 28.3085 27.8812 28.4935L28.0046 28.7345H27.2232L27.1777 28.67C27.1383 28.6135 27.0952 28.5599 27.0486 28.5093C26.9266 28.3728 26.7771 28.2635 26.61 28.1887C26.4428 28.114 26.2618 28.0753 26.0787 28.0753C25.8955 28.0753 25.7145 28.114 25.5473 28.1887C25.3802 28.2635 25.2307 28.3728 25.1087 28.5093C24.9554 28.6737 24.8415 28.8709 24.7758 29.0858L25.7667 29.2465L24.0584 29.4677L24.0579 29.0869ZM28.1305 29.6249C28.0511 30.037 27.8582 30.4188 27.5735 30.7272C27.1849 31.1468 26.6673 31.3779 26.1161 31.3779C25.565 31.3779 25.0476 31.1471 24.6588 30.7272C24.5188 30.5745 24.4005 30.4033 24.3072 30.2184L24.1837 29.9773H24.9665L25.012 30.0419C25.0514 30.0983 25.0945 30.152 25.1411 30.2026C25.2631 30.3391 25.4126 30.4483 25.5798 30.5231C25.7469 30.5979 25.9279 30.6365 26.1111 30.6365C26.2942 30.6365 26.4752 30.5979 26.6424 30.5231C26.8095 30.4483 26.959 30.3391 27.081 30.2026C27.234 30.0381 27.3476 29.8411 27.4131 29.6263L26.4222 29.4656L28.1305 29.2428V29.6249ZM23.3249 25.416C24.3235 25.416 25.1446 24.5952 25.1446 23.5883C25.1419 23.1091 24.9503 22.6503 24.6114 22.3116C24.2726 21.9728 23.8137 21.7814 23.3346 21.7788C22.8554 21.7763 22.3946 21.9629 22.0521 22.298C21.7097 22.6332 21.5133 23.0899 21.5055 23.569V23.5883C21.5037 24.0708 21.6935 24.5343 22.0333 24.877C22.373 25.2197 22.8349 25.4136 23.3174 25.416H23.3249Z" fill="#167AF0"/>
+<path d="M22.0767 25.8545H22.085C22.1011 25.8706 23.0675 26.4383 24.3556 25.8545H24.3594C24.9729 26.0505 25.3912 26.4562 25.6716 26.93C25.2292 26.9692 24.8068 27.132 24.4525 27.3998C24.0982 27.6676 23.8263 28.0295 23.6678 28.4444C23.5092 28.8592 23.4705 29.3102 23.5559 29.7461C23.6414 30.1819 23.8476 30.5849 24.151 30.9091C21.7837 31.5979 20.2088 29.6714 20.2088 29.6714C19.9108 26.5344 22.0767 25.8545 22.0767 25.8545Z" fill="#167AF0"/>
+</g>
+<defs>
+<clipPath id="clip0_561_3826">
+<rect width="22" height="22" fill="white" transform="translate(13 13)"/>
+</clipPath>
+</defs>
+</svg>

src/views/count/main/trend/icons/icon8.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" rx="14" fill="#167AF0" fill-opacity="0.1"/>
+<path d="M20.3407 23.8579C20.3735 23.8367 20.4215 23.7987 20.4359 23.7893C20.4588 23.7802 20.4651 23.7668 20.5132 23.7314C20.7243 23.5845 20.9395 23.4438 21.1618 23.3155C19.794 22.2226 18.9643 20.6033 18.9643 18.8329C18.9647 18.2144 19.0691 17.6001 19.2737 17.0136C19.1694 17.0052 19.0652 16.9985 18.9583 16.9985C16.8793 16.9985 15.1938 18.5772 15.1938 20.5238C15.1938 22.0874 16.281 23.411 17.7849 23.873C15.0488 24.5812 13 27.4363 13 30.6917C13 30.7544 14.2973 30.7328 16.1629 30.7121C16.6786 27.8906 18.21 25.4137 20.3407 23.8579ZM26.1968 30.8148C26.1968 28.163 28.2591 25.9707 30.9221 25.6283C29.8211 24.5086 28.4685 23.7062 26.9726 23.3754C28.9635 22.7052 30.3902 20.927 30.3902 18.8328C30.3901 16.1641 28.0775 14 25.2259 14C22.3734 14 20.0612 16.1641 20.0612 18.8328C20.0612 20.9846 21.5656 22.8064 23.6428 23.4316C19.8829 24.3963 17.0662 28.3292 17.0662 32.8097C17.0662 32.8529 17.5074 32.8671 18.2665 32.8671C19.784 32.8671 22.5741 32.8097 25.6517 32.8097C25.9768 32.8097 26.2961 32.81 26.6094 32.8106C26.3366 32.1778 26.1964 31.4996 26.1968 30.8148ZM31.6466 26.6305C29.2465 26.6305 27.2937 28.5081 27.2937 30.8153C27.2937 33.1224 29.2465 35 31.6466 35C34.0468 35 36 33.1224 36 30.8153C36 28.5081 34.0468 26.6305 31.6466 26.6305ZM33.6578 31.5182H31.8295C31.6839 31.5181 31.5444 31.4625 31.4415 31.3637C31.3387 31.2648 31.2809 31.1308 31.2809 30.991C31.2812 30.9594 31.2846 30.9279 31.2912 30.8969C31.2845 30.826 31.2809 30.7418 31.2809 30.6396V28.1795C31.2809 28.0398 31.3387 27.9058 31.4416 27.807C31.5444 27.7083 31.684 27.6528 31.8294 27.6528C31.9749 27.6528 32.1144 27.7083 32.2173 27.807C32.3201 27.9058 32.3779 28.0398 32.3779 28.1795V30.4638H33.6577C33.8027 30.4648 33.9414 30.5207 34.0436 30.6195C34.1458 30.7183 34.2031 30.8518 34.2031 30.991C34.2031 31.1302 34.1458 31.2638 34.0436 31.3626C33.9414 31.4613 33.8027 31.5173 33.6577 31.5183" fill="#167AF0"/>
+</svg>

src/views/count/main/trend/icons/icon9.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" rx="14" fill="#167AF0" fill-opacity="0.1"/>
+<path d="M15 33.8333V14.6667C15 14.2246 15.1724 13.8007 15.4793 13.4882C15.7862 13.1756 16.2024 13 16.6364 13H26.5953C27.0292 13.0001 27.4454 13.1758 27.7522 13.4883L32.5205 18.345C32.8274 18.6575 32.9999 19.0813 33 19.5233V33.8333C33 34.2754 32.8276 34.6993 32.5207 35.0118C32.2138 35.3244 31.7976 35.5 31.3636 35.5H16.6364C16.2024 35.5 15.7862 35.3244 15.4793 35.0118C15.1724 34.6993 15 34.2754 15 33.8333ZM32.1818 18.8333L27.2727 13.8333V18.8333H32.1818ZM24.8182 19.6667H23.1818V28H24.8182V19.6667ZM24.8182 29.6667H23.1818V31.3333H24.8182V29.6667Z" fill="#167AF0"/>
+</svg>

src/views/count/main/trend/index.vue

@@ -1,24 +1,243 @@
 <template>
-	<div class="layout-padding">
+   <div class="layout-padding">
       <div class="!overflow-auto px-1">
          <Lcard :height="440">
-            <div class="tit1">整体趋势</div>
-            
+            <template #default>
+               <Title style="margin-bottom: 10px;" title="整体趋势">
+                  <el-popover class="box-item" placement="right" trigger="hover" width="250">
+                     <template #reference>
+                        <el-icon class="ml-1" style="color: #a4b8cf">
+                           <InfoFilled />
+                        </el-icon>
+                     </template>
+                     <template #default>
+                        <div class="ant-popover-inner-content">
+                           <div class="um-page-tips-content" style="line-height: 24px">
+                              <p><span class="highlight">新增用户：</span><span>第一次启动应用的用户（以设备为判断标准）</span></p>
+                              <p><span class="highlight">新增账号：</span><span>第一次启动应用的账号</span></p>
+                              <p><span class="highlight">新增用户占比：</span><span>某时段内新增用户占该时段活跃用户的比例</span></p>
+                              <p>
+                                 <span>
+                                    按天、周或月查看数据可进行版本、渠道的交叉筛选，小时数据最多展示7天并且不支持筛选。周区间定义为周日至次周周六。按周（按月）显示时，界面上用每周的周日（每个月的第一日）来代表该周（该月）
+                                 </span>
+                              </p>
+                           </div>
+                        </div>
+                     </template>
+                  </el-popover>
+               </Title>
+               <div class="msg">
+                  <el-icon class="ml-1" style="color: #a4b8cf; vertical-align: middle;">
+                     <InfoFilled />
+                  </el-icon>
+                  前往
+                  <span class="link">U-DOP数据开放平台</span>
+                  ，获取用户访问明细日志，点击查看
+                  <span class="link">支持返还的字段</span>
+               </div>
+               <div class="box1">
+                  <Lcard :height="280" style="margin-right: 20px;">
+                     <div class="card-box1">
+                        <InfoCard title="订单数量" value="1,234" description="较昨日减少 1.2%">
+                           <template #icon>
+                              <img src="./icons/icon1.svg" alt="icon">
+                           </template>
+                        </InfoCard>
+                        <InfoCard title="订单数量" value="1,234" description="较昨日减少 1.2%">
+                           <template #icon>
+                              <img src="./icons/icon2.svg" alt="icon">
+                           </template>
+                        </InfoCard>
+                        <InfoCard title="订单数量" value="1,234" description="较昨日减少 1.2%">
+                           <template #icon>
+                              <img src="./icons/icon3.svg" alt="icon">
+                           </template>
+                        </InfoCard>
+                        <InfoCard title="订单数量" value="1,234" description="较昨日减少 1.2%">
+                           <template #icon>
+                              <img src="./icons/icon4.svg" alt="icon">
+                           </template>
+                        </InfoCard>
+                     </div>
+                  </Lcard>
+                  <Lcard :height="280">
+                     <div class="card-box2">
+                        <InfoCard title="订单数量" value="1,234" description="较昨日减少 1.2%">
+                           <template #icon>
+                              <img src="./icons/icon5.svg" alt="icon">
+                           </template>
+                        </InfoCard>
+                        <InfoCard title="订单数量" value="1,234" description="较昨日减少 1.2%">
+                           <template #icon>
+                              <img src="./icons/icon6.svg" alt="icon">
+                           </template>
+                        </InfoCard>
+                        <InfoCard title="订单数量" value="1,234" description="较昨日减少 1.2%">
+                           <template #icon>
+                              <img src="./icons/icon7.svg" alt="icon">
+                           </template>
+                        </InfoCard>
+                        <InfoCard title="订单数量" value="1,234" description="较昨日减少 1.2%">
+                           <template #icon>
+                              <img src="./icons/icon8.svg" alt="icon">
+                           </template>
+                        </InfoCard>
+                        <InfoCard title="订单数量" value="1,234" description="较昨日减少 1.2%">
+                           <template #icon>
+                              <img src="./icons/icon9.svg" alt="icon">
+                           </template>
+                        </InfoCard>
+                     </div>
+                  </Lcard>
+               </div>
+            </template>
          </Lcard>
-         <Lcard :height="440"/>
-         <Lcard :height="440"/>
-         <Lcard :height="440"/>
-         <Lcard :height="440"/>
-      </div>
-	</div>
+         <Lcard :height="975">          
+            <el-date-picker
+               style="float: left;"
+               v-model="timeRange"
+               type="datetimerange"
+               range-separator="To"
+               start-placeholder="Start date"
+               end-placeholder="End date"
+            />
+            <div class="link" style="float: right;">订阅</div>
+            <div class="link" style="float: right;">编辑指标</div>
+            <div class="link" style="float: right;">生成AI简报</div>
+            <div class="line"></div>
+            <div class="flex items-center justify-between mb-2 mt-3">
+               <el-form>
+                  <el-form-item>
+                     <el-select style="width: 140px" placeholder="渠道对比">
+                        <!-- <el-option v-for="item in channelCompareOptions" :key="item.value" :label="item.label" :value="item.value" /> -->
+                     </el-select>
+                     <el-button class="ml-2">对比时间</el-button>
+                  </el-form-item>
+               </el-form>
+               <div class="flex items-center">
+                  <el-radio-group size="small">
+                     <el-radio-button label="hour">新增用户</el-radio-button>
+                     <el-radio-button label="day">活跃用户</el-radio-button>
+                     <el-radio-button label="week">启动次数</el-radio-button>
+                     <el-radio-button label="month">累计用户</el-radio-button>
+                  </el-radio-group>
+               </div>
+				</div>
+            <div class="relative">
+               <div ref="qChartRef" style="width: 100%; height: 320px"></div>
+            </div>
+         </Lcard>
+      <Lcard :height="440" />
+      <Lcard :height="440" />
+      <Lcard :height="440" />
+   </div>
+   </div>
 </template>
 
 <script lang="ts" name="countMainTrend" setup>
+import { ref, onMounted, watch, computed, defineAsyncComponent } from 'vue';
 import { useI18n } from 'vue-i18n';
+import * as echarts from 'echarts';
 // 引入组件
 const Lcard = defineAsyncComponent(() => import('/@/components/LYcom/Lcard/index.vue'));
+const Title = defineAsyncComponent(() => import('/@/components/Title/index.vue'));
+const InfoCard = defineAsyncComponent(() => import('./infoCard.vue'));
 const { t } = useI18n();
+const timeRange = ref(null);
+let qualityChart: echarts.ECharts | null = null;
+const qChartRef = ref(null);
+onMounted(() => {
+	// initLineChart();
+	initQualityChart();
+   console.log(qualityChart);
+	// initBehaviorChart();
+});
+const qualityXAxis = ref<string[]>([
+	'2025-07-01',
+	'2025-07-08',
+	'2025-07-15',
+	'2025-07-22',
+	'2025-07-29',
+	'2025-08-05',
+	'2025-08-12',
+	'2025-08-19',
+	'2025-08-26',
+	'2025-09-02',
+	'2025-09-09',
+	'2025-09-16',
+]);
+const retentionSeries = ref<number[]>([20, 23, 27, 24, 22, 15, 5, 4, 16, 26, 25, 2]);
+const industryAvgSeries = ref<number[]>([16, 18, 20, 24, 25, 24, 16, 10, 15, 22, 21, 12]);
+const peerSameScaleSeries = ref<number[]>([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+function initQualityChart(): void {
+   console.log(qChartRef.value);
+	if (!qChartRef.value) return;
+	if (qualityChart) qualityChart.dispose();
+	qualityChart = echarts.init( qChartRef.value);
+   debugger
+	const option: echarts.EChartsOption = {
+		tooltip: { trigger: 'axis', valueFormatter: (v) => `${v}%` },
+		legend: { data: ['留存率', '同行业App', '同行业同规模App'] },
+		grid: { left: 40, right: 20, top: 30, bottom: 30 },
+		xAxis: { type: 'category', data: qualityXAxis.value },
+		yAxis: {
+			type: 'value',
+			min: 0,
+			max: 30,
+			axisLabel: { formatter: '{value}%' },
+			splitLine: { lineStyle: { color: '#f3f4f6' } },
+		},
+		series: [
+			{ name: '留存率', type: 'line', smooth: true, data: retentionSeries.value },
+			{ name: '同行业App', type: 'line', smooth: true, data: industryAvgSeries.value, color: '#f59e0b' },
+			{ name: '同行业同规模App', type: 'line', smooth: true, data: peerSameScaleSeries.value, color: '#60a5fa' },
+		],
+	};
+	qualityChart.setOption(option);
+}
+
+
+
 </script>
 <style lang="scss" scoped>
+.msg {
+   height: 30px;
+   background-color: #f4f5fa;
+   line-height: 30px;
+   font-size: 12px;
+}
+
+.link {
+   color: #167af0;
+   cursor: pointer;
+}
+
+.box1 {
+   display: flex;
+   margin-top: 30px;
+
+   .card-box1,
+   .card-box2 {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: start;
+   }
+
+   .card-box1 {
+      .info-card {
+         width: 48%;
+      }
+   }
 
+   .card-box2 {
+      .info-card {
+         width: 33%;
+      }
+   }
+}
+.line {
+   margin: 90px -30px 30px;
+   height: 1px;
+   background-color: #E6E6E6;
+}
 </style>

src/views/count/main/trend/infoCard.vue

@@ -0,0 +1,89 @@
+<!-- src/components/LYcom/InfoCard/index.vue -->
+<template>
+  <div class="info-card">
+    <div class="info-card-icon">
+      <slot name="icon">
+        <i :class="iconClass" v-if="iconClass"></i>
+        <svg v-else-if="iconSvg" v-html="iconSvg" class="icon-svg"></svg>
+      </slot>
+    </div>
+    <div class="info-card-content">
+      <div class="content-title">{{ title }}</div>
+      <div class="content-value">{{ value }}</div>
+      <div class="content-desc">{{ description }}</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+interface Props {
+  iconClass?: string
+  iconSvg?: string
+  title?: string
+  value?: string | number
+  description?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  title: '',
+  value: '',
+  description: ''
+})
+</script>
+
+<style scoped>
+.info-card {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  background-color: #ffffff;
+  border-radius: 8px;
+  /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
+}
+
+.info-card-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 50px;
+  height: 50px;
+  border-radius: 8px;
+  background-color: #f0f2f5;
+  margin-right: 16px;
+  flex-shrink: 0;
+}
+
+.info-card-icon i {
+  font-size: 24px;
+  color: #409eff;
+}
+
+.info-card-icon .icon-svg {
+  width: 24px;
+  height: 24px;
+}
+
+.info-card-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.content-title {
+  font-size: 14px;
+  color: #909399;
+  margin-bottom: 4px;
+}
+
+.content-value {
+  font-size: 20px;
+  font-weight: bold;
+  color: #303133;
+  margin-bottom: 4px;
+}
+
+.content-desc {
+  font-size: 12px;
+  color: #c0c4cc;
+}
+</style>

src/views/count/user/adduser/index.vue

@@ -259,6 +259,7 @@ function initLineChart(): void {
 onMounted(() => {
 	initLineChart();
 	initQualityChart();
+	console.log(qualityChart);
 	initBehaviorChart();
 });