update

src/assets/images/classObserve/book.svg

@@ -0,0 +1,6 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 15C1.83579 15 1.5 15.3358 1.5 15.75C1.5 16.1642 1.83579 16.5 2.25 16.5H15.1985C15.0846 16.2892 15 16.0368 15 15.75C15 15.4632 15.0846 15.2108 15.1985 15H2.25ZM17.5565 14.9345L17.55 14.9375L17.514 14.9547C17.4811 14.9708 17.4318 14.9955 17.3719 15.0279C17.2502 15.0936 17.0927 15.1862 16.9398 15.2969C16.7827 15.4106 16.6559 15.5251 16.5747 15.6287C16.5223 15.6956 16.5062 15.7353 16.5015 15.75C16.5062 15.7647 16.5223 15.8044 16.5747 15.8713C16.6559 15.9749 16.7827 16.0894 16.9398 16.2031C17.0927 16.3138 17.2502 16.4064 17.3719 16.4721C17.4318 16.5045 17.4811 16.5292 17.514 16.5453L17.55 16.5625L17.5565 16.5655L17.5568 16.5656C17.8795 16.7103 18.0573 17.0608 17.9834 17.4067C17.9095 17.7527 17.6038 18 17.25 18H2.25C1.00736 18 0 16.9926 0 15.75C0 14.5074 1.00736 13.5 2.25 13.5H17.25C17.6038 13.5 17.9095 13.7473 17.9834 14.0933C18.0573 14.4389 17.8799 14.789 17.5578 14.9339C17.5574 14.9341 17.5571 14.9342 17.5568 14.9344L17.5565 14.9345Z" fill="black" fill-opacity="0.9"/>
+<path d="M0 0.75C0 0.335786 0.335786 0 0.75 0H10V1.5H1.5V13.5H16.5V7H18V14.25C18 14.6642 17.6642 15 17.25 15H1.5V15.75C1.5 16.1642 1.16421 16.5 0.75 16.5C0.335786 16.5 0 16.1642 0 15.75V0.75Z" fill="black" fill-opacity="0.9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 6C3 5.58579 3.33579 5.25 3.75 5.25H9.75C10.1642 5.25 10.5 5.58579 10.5 6C10.5 6.41421 10.1642 6.75 9.75 6.75H3.75C3.33579 6.75 3 6.41421 3 6Z" fill="black" fill-opacity="0.9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 9.75C3 9.33579 3.33579 9 3.75 9H7.5C7.91421 9 8.25 9.33579 8.25 9.75C8.25 10.1642 7.91421 10.5 7.5 10.5H3.75C3.33579 10.5 3 10.1642 3 9.75Z" fill="black" fill-opacity="0.9"/>
+</svg>

src/assets/images/classObserve/colD.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 5.25C11.6022 5.25 11.2206 5.40804 10.9393 5.68934C10.658 5.97064 10.5 6.35218 10.5 6.75C10.5 7.14782 10.658 7.52936 10.9393 7.81066C11.2206 8.09196 11.6022 8.25 12 8.25C12.3978 8.25 12.7794 8.09196 13.0607 7.81066C13.342 7.52936 13.5 7.14782 13.5 6.75C13.5 6.35218 13.342 5.97064 13.0607 5.68934C12.7794 5.40804 12.3978 5.25 12 5.25Z" fill="#272636"/>
+<path d="M12 10.5C11.6022 10.5 11.2206 10.658 10.9393 10.9393C10.658 11.2206 10.5 11.6022 10.5 12C10.5 12.3978 10.658 12.7794 10.9393 13.0607C11.2206 13.342 11.6022 13.5 12 13.5C12.3978 13.5 12.7794 13.342 13.0607 13.0607C13.342 12.7794 13.5 12.3978 13.5 12C13.5 11.6022 13.342 11.2206 13.0607 10.9393C12.7794 10.658 12.3978 10.5 12 10.5Z" fill="#272636"/>
+<path d="M12 15.75C11.6022 15.75 11.2206 15.908 10.9393 16.1893C10.658 16.4706 10.5 16.8522 10.5 17.25C10.5 17.6478 10.658 18.0294 10.9393 18.3107C11.2206 18.592 11.6022 18.75 12 18.75C12.3978 18.75 12.7794 18.592 13.0607 18.3107C13.342 18.0294 13.5 17.6478 13.5 17.25C13.5 16.8522 13.342 16.4706 13.0607 16.1893C12.7794 15.908 12.3978 15.75 12 15.75Z" fill="#272636"/>
+</svg>

src/assets/images/classObserve/del2.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2.5C5 2.22386 5.22386 2 5.5 2H10.5C10.7761 2 11 2.22386 11 2.5C11 2.77614 10.7761 3 10.5 3H5.5C5.22386 3 5 2.77614 5 2.5Z" fill="black" fill-opacity="0.9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 4.5C2 4.21185 2.22386 4 2.5 4H13.5C13.7761 4 14 4.21185 14 4.5C14 4.83161 13.7761 5 13.5 5L12.5 5.04348V14H3.5V5H2.5C2.22386 5 2 4.83161 2 4.5ZM4.5 5V12.9565L11.5 13V5.04348L4.5 5Z" fill="black" fill-opacity="0.9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 6.45314C6.77614 6.45314 7 6.65665 7 6.90769V10.9986C7 11.2496 6.77614 11.4531 6.5 11.4531C6.22386 11.4531 6 11.2496 6 10.9986V6.90769C6 6.65665 6.22386 6.45314 6.5 6.45314Z" fill="black" fill-opacity="0.9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 6.45314C9.77614 6.45314 10 6.65665 10 6.90769V10.9986C10 11.2496 9.77614 11.4531 9.5 11.4531C9.22386 11.4531 9 11.2496 9 10.9986V6.90769C9 6.65665 9.22386 6.45314 9.5 6.45314Z" fill="black" fill-opacity="0.9"/>
+</svg>

src/assets/images/classObserve/edit.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 2.5C2 2.22386 2.22386 2 2.5 2H8.5C8.77614 2 9 2.22386 9 2.5C9 2.77614 8.77614 3 8.5 3H3V13H13V8.5C13 8.22386 13.2239 8 13.5 8C13.7761 8 14 8.22386 14 8.5V13.5C14 13.7761 13.7761 14 13.5 14H2.5C2.22386 14 2 13.7761 2 13.5V2.5Z" fill="black" fill-opacity="0.9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.8536 2.14645C14.0488 2.34171 14.0488 2.65829 13.8536 2.85355L7.85355 8.85355C7.65829 9.04882 7.34171 9.04882 7.14645 8.85355C6.95118 8.65829 6.95118 8.34171 7.14645 8.14645L13.1464 2.14645C13.3417 1.95118 13.6583 1.95118 13.8536 2.14645Z" fill="black" fill-opacity="0.9"/>
+</svg>

src/assets/images/classObserve/endLang.svg

@@ -0,0 +1,39 @@
+<svg width="104" height="104" viewBox="0 0 104 104" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dd_1226_3643)">
+<path d="M23 51C23 54.677 23.7242 58.318 25.1314 61.7151C26.5385 65.1123 28.601 68.199 31.201 70.799C33.8011 73.399 36.8877 75.4615 40.2849 76.8686C43.682 78.2758 47.323 79 51 79C54.677 79 58.318 78.2758 61.7151 76.8686C65.1123 75.4615 68.199 73.399 70.799 70.799C73.399 68.199 75.4615 65.1123 76.8686 61.7151C78.2758 58.318 79 54.677 79 51C79 47.323 78.2758 43.682 76.8686 40.2849C75.4615 36.8877 73.399 33.8011 70.799 31.201C68.199 28.601 65.1123 26.5385 61.7151 25.1314C58.318 23.7242 54.677 23 51 23C47.323 23 43.682 23.7242 40.2849 25.1314C36.8877 26.5385 33.8011 28.601 31.201 31.201C28.601 33.8011 26.5385 36.8877 25.1314 40.2849C23.7242 43.682 23 47.323 23 51Z" fill="#E0EAFB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M43.2549 47.4219C43.7485 47.4219 44.1486 47.822 44.1486 48.3155V50.6985C44.1486 54.4822 47.2159 57.5495 50.9996 57.5495C54.7834 57.5495 57.8507 54.4822 57.8507 50.6985V48.3155C57.8507 47.822 58.2508 47.4219 58.7443 47.4219C59.2378 47.4219 59.6379 47.822 59.6379 48.3155V50.6985C59.6379 55.4693 55.7704 59.3368 50.9996 59.3368C46.2288 59.3368 42.3613 55.4693 42.3613 50.6985V48.3155C42.3613 47.822 42.7614 47.4219 43.2549 47.4219Z" fill="url(#paint0_linear_1226_3643)"/>
+<rect x="46.2344" y="38.7891" width="9.53191" height="16.6809" rx="4.76596" fill="url(#paint1_linear_1226_3643)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M45.3398 62.3155C45.3398 61.822 45.7399 61.4219 46.2335 61.4219H55.7654C56.2589 61.4219 56.659 61.822 56.659 62.3155C56.659 62.809 56.2589 63.2091 55.7654 63.2091H46.2335C45.7399 63.2091 45.3398 62.809 45.3398 62.3155Z" fill="url(#paint2_linear_1226_3643)"/>
+<circle cx="50.9996" cy="51.0035" r="22.0426" fill="white"/>
+<rect x="41" y="41" width="20" height="20" rx="4" fill="#EE3E3E"/>
+</g>
+<defs>
+<filter id="filter0_dd_1226_3643" x="0" y="0" width="104" height="104" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.113725 0 0 0 0 0.223529 0 0 0 0 0.513726 0 0 0 0.08 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1226_3643"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="4" operator="dilate" in="SourceAlpha" result="effect2_dropShadow_1226_3643"/>
+<feOffset dx="1" dy="1"/>
+<feGaussianBlur stdDeviation="10"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.113177 0 0 0 0 0.224987 0 0 0 0 0.5125 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_1226_3643" result="effect2_dropShadow_1226_3643"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1226_3643" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_1226_3643" x1="42.3613" y1="59.3368" x2="59.6379" y2="59.3368" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3673E8"/>
+<stop offset="1" stop-color="#AD88FD"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1226_3643" x1="46.2344" y1="55.4699" x2="55.7663" y2="55.4699" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3673E8"/>
+<stop offset="1" stop-color="#AD88FD"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1226_3643" x1="45.3398" y1="63.2091" x2="56.659" y2="63.2091" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3673E8"/>
+<stop offset="1" stop-color="#AD88FD"/>
+</linearGradient>
+</defs>
+</svg>

src/assets/images/classObserve/fillInfo.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.1625 2.6725C11.281 2.55964 11.439 2.49773 11.6026 2.50006C11.7662 2.5024 11.9223 2.5688 12.0375 2.685L15.4438 6.12062C15.5039 6.18121 15.551 6.25348 15.5822 6.33298C15.6133 6.41247 15.6278 6.49751 15.6248 6.58283C15.6219 6.66816 15.6014 6.75197 15.5648 6.82909C15.5282 6.90621 15.4761 6.97502 15.4119 7.03125L7.20438 14.22C7.08703 14.3229 6.93543 14.3782 6.77938 14.375L3.73688 14.31C3.5734 14.3066 3.41778 14.2392 3.30339 14.1224C3.18901 14.0055 3.12496 13.8485 3.125 13.685V10.595C3.12498 10.5104 3.14215 10.4267 3.17545 10.3489C3.20876 10.2711 3.25751 10.2009 3.31875 10.1425L11.1625 2.6725ZM11.9919 12.7212L16.6763 12.8125C16.7583 12.8141 16.8393 12.8319 16.9145 12.8647C16.9897 12.8976 17.0577 12.945 17.1146 13.0042C17.1715 13.0633 17.2162 13.1331 17.2462 13.2096C17.2761 13.286 17.2907 13.3676 17.2891 13.4497C17.2875 13.5318 17.2697 13.6127 17.2368 13.6879C17.2039 13.7632 17.1566 13.8312 17.0974 13.8881C17.0382 13.945 16.9684 13.9897 16.892 14.0196C16.8155 14.0495 16.734 14.0641 16.6519 14.0625L11.9675 13.9712C11.8854 13.9696 11.8045 13.9518 11.7293 13.9189C11.6541 13.886 11.5861 13.8385 11.5292 13.7794C11.4723 13.7202 11.4277 13.6503 11.3978 13.5739C11.3679 13.4974 11.3534 13.4158 11.355 13.3337C11.3566 13.2517 11.3744 13.1707 11.4074 13.0955C11.4403 13.0203 11.4877 12.9523 11.5469 12.8955C11.6061 12.8386 11.6759 12.7939 11.7524 12.764C11.8288 12.7341 11.9098 12.7196 11.9919 12.7212ZM11.5813 4L4.375 10.8625V13.0731L6.5625 13.12L14.0881 6.52875L11.5813 4ZM16.6456 15.8462C16.8114 15.845 16.9709 15.9097 17.0889 16.026C17.207 16.1423 17.2741 16.3008 17.2753 16.4666C17.2766 16.6323 17.2119 16.7918 17.0956 16.9099C16.9792 17.028 16.8208 17.095 16.655 17.0962L4.38 17.1875C4.21424 17.1887 4.05477 17.1241 3.93669 17.0078C3.8186 16.8914 3.75156 16.7329 3.75031 16.5672C3.74907 16.4014 3.81372 16.242 3.93006 16.1239C4.04639 16.0058 4.20486 15.9387 4.37063 15.9375L16.6456 15.8462Z" fill="black" fill-opacity="0.4"/>
+</svg>

src/assets/images/classObserve/filter.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.25 3.375C2.25 2.75368 2.75368 2.25 3.375 2.25H14.625C15.2463 2.25 15.75 2.75368 15.75 3.375V5.38422L10.9688 8.19672V15.75H7.03125V8.19672L2.25 5.38422V3.375ZM14.625 3.375H3.375V4.74078L8.15625 7.55328V14.625H9.84375V7.55328L14.625 4.74078V3.375Z" fill="black" fill-opacity="0.9"/>
+</svg>

src/assets/images/classObserve/langcut.svg

@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.2168 21.7778C22.2168 22.1111 21.9803 22.3333 21.6257 22.3333H6.25617C5.90148 22.3333 5.66503 22.1111 5.66503 21.7777V13.2222L2 16.5556H3.8916V22.3333C3.8916 23.2222 4.7192 24 5.66503 24H22.2168C23.1626 24 23.9902 23.2222 23.9902 22.3333V15L22.2167 16.5556V21.7778H22.2168ZM5.66503 6.22222C5.66503 5.88887 5.90148 5.66663 6.25617 5.66663H21.7439C22.0986 5.66663 22.335 5.88887 22.335 6.22222V14L26 10.4444H23.9902V5.66668C23.9902 4.77774 23.1626 4 22.2167 4H5.66508C4.71925 4 3.89165 4.77778 3.89165 5.66668V12.2222L5.66508 10.5555V6.22222H5.66503Z" fill="black" fill-opacity="0.9"/>
+<path d="M12.7121 8H15.2878L21 20H18.5697L17.178 16.9076H10.8012L9.40946 20H7L12.7122 8H12.7121ZM11.4866 15.3949H16.4926L14.0415 9.96642H13.9584L11.4866 15.3949Z" fill="#3681FC"/>
+</svg>

src/assets/images/classObserve/recording.svg

@@ -0,0 +1,55 @@
+<svg width="104" height="104" viewBox="0 0 104 104" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dd_1239_4329)">
+<path d="M23 51C23 54.677 23.7242 58.318 25.1314 61.7151C26.5385 65.1123 28.601 68.199 31.201 70.799C33.8011 73.399 36.8877 75.4615 40.2849 76.8686C43.682 78.2758 47.323 79 51 79C54.677 79 58.318 78.2758 61.7151 76.8686C65.1123 75.4615 68.199 73.399 70.799 70.799C73.399 68.199 75.4615 65.1123 76.8686 61.7151C78.2758 58.318 79 54.677 79 51C79 47.323 78.2758 43.682 76.8686 40.2849C75.4615 36.8877 73.399 33.8011 70.799 31.201C68.199 28.601 65.1123 26.5385 61.7151 25.1314C58.318 23.7242 54.677 23 51 23C47.323 23 43.682 23.7242 40.2849 25.1314C36.8877 26.5385 33.8011 28.601 31.201 31.201C28.601 33.8011 26.5385 36.8877 25.1314 40.2849C23.7242 43.682 23 47.323 23 51Z" fill="#E0EAFB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M43.2549 47.4219C43.7485 47.4219 44.1486 47.822 44.1486 48.3155V50.6985C44.1486 54.4822 47.2159 57.5495 50.9996 57.5495C54.7834 57.5495 57.8507 54.4822 57.8507 50.6985V48.3155C57.8507 47.822 58.2508 47.4219 58.7443 47.4219C59.2378 47.4219 59.6379 47.822 59.6379 48.3155V50.6985C59.6379 55.4693 55.7704 59.3368 50.9996 59.3368C46.2288 59.3368 42.3613 55.4693 42.3613 50.6985V48.3155C42.3613 47.822 42.7614 47.4219 43.2549 47.4219Z" fill="url(#paint0_linear_1239_4329)"/>
+<rect x="46.2344" y="38.7891" width="9.53191" height="16.6809" rx="4.76596" fill="url(#paint1_linear_1239_4329)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M45.3398 62.3155C45.3398 61.822 45.7399 61.4219 46.2335 61.4219H55.7654C56.2589 61.4219 56.659 61.822 56.659 62.3155C56.659 62.809 56.2589 63.2091 55.7654 63.2091H46.2335C45.7399 63.2091 45.3398 62.809 45.3398 62.3155Z" fill="url(#paint2_linear_1239_4329)"/>
+<circle cx="50.9996" cy="51.0035" r="22.0426" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M43.5518 47.7266C44.0454 47.7266 44.4454 48.1266 44.4454 48.6202V51.0032C44.4454 54.7869 47.5128 57.8542 50.9986 57.8542C54.7824 57.8542 57.5518 54.7869 57.5518 51.0032V48.6202C57.5518 48.1266 57.9519 47.7266 58.4454 47.7266C58.939 47.7266 59.3391 48.1266 59.3391 48.6202V51.0032C59.3391 55.774 55.7694 59.6415 50.9986 59.6415C46.5257 59.6415 42.6582 55.774 42.6582 51.0032V48.6202C42.6582 48.1266 43.0583 47.7266 43.5518 47.7266Z" fill="url(#paint3_linear_1239_4329)"/>
+<path d="M46.5312 43.554C46.5312 41.0864 48.5317 39.0859 50.9993 39.0859C53.467 39.0859 55.4674 41.0864 55.4674 43.554V51.2987C55.4674 53.7664 53.467 55.7668 50.9993 55.7668C48.5317 55.7668 46.5312 53.7664 46.5312 51.2987V43.554Z" fill="url(#paint4_linear_1239_4329)"/>
+<path d="M49.5 44.5H52.5" stroke="white" stroke-opacity="0.9" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M49.5 48H52.5" stroke="white" stroke-opacity="0.9" stroke-width="1.5" stroke-linecap="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M45.3398 62.0186C45.3398 61.5251 45.7399 61.125 46.2335 61.125H55.7654C56.2589 61.125 56.659 61.5251 56.659 62.0186C56.659 62.5121 56.2589 62.9122 55.7654 62.9122H46.2335C45.7399 62.9122 45.3398 62.5121 45.3398 62.0186Z" fill="url(#paint5_linear_1239_4329)"/>
+</g>
+<defs>
+<filter id="filter0_dd_1239_4329" x="0" y="0" width="104" height="104" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.113725 0 0 0 0 0.223529 0 0 0 0 0.513726 0 0 0 0.08 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1239_4329"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="4" operator="dilate" in="SourceAlpha" result="effect2_dropShadow_1239_4329"/>
+<feOffset dx="1" dy="1"/>
+<feGaussianBlur stdDeviation="10"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.113177 0 0 0 0 0.224987 0 0 0 0 0.5125 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_1239_4329" result="effect2_dropShadow_1239_4329"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1239_4329" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_1239_4329" x1="42.3613" y1="59.3368" x2="59.6379" y2="59.3368" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3673E8"/>
+<stop offset="1" stop-color="#AD88FD"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1239_4329" x1="46.2344" y1="55.4699" x2="55.7663" y2="55.4699" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3673E8"/>
+<stop offset="1" stop-color="#AD88FD"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1239_4329" x1="45.3398" y1="63.2091" x2="56.659" y2="63.2091" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3673E8"/>
+<stop offset="1" stop-color="#AD88FD"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1239_4329" x1="42.6582" y1="59.6415" x2="59.3391" y2="59.6415" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3673E8"/>
+<stop offset="1" stop-color="#AD88FD"/>
+</linearGradient>
+<linearGradient id="paint4_linear_1239_4329" x1="46.5312" y1="55.7668" x2="55.4674" y2="55.7668" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3673E8"/>
+<stop offset="1" stop-color="#AD88FD"/>
+</linearGradient>
+<linearGradient id="paint5_linear_1239_4329" x1="45.3398" y1="62.9122" x2="56.659" y2="62.9122" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3673E8"/>
+<stop offset="1" stop-color="#AD88FD"/>
+</linearGradient>
+</defs>
+</svg>

src/assets/images/classObserve/science.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.55664 11.4316H3.24219C2.51172 11.4316 1.91406 10.8281 1.91406 10.0859V3.43945C1.91406 2.69727 2.51172 2.09375 3.24219 2.09375H8.55664C9.28711 2.09375 9.88477 2.69727 9.88477 3.43945V10.0859C9.88477 10.8262 9.28906 11.4316 8.55664 11.4316ZM17.0781 4.24805H13.7305C13.1543 4.24805 12.6836 3.77148 12.6836 3.1875V3.1543C12.6836 2.57031 13.1543 2.09375 13.7305 2.09375H17.0781C17.6543 2.09375 18.125 2.57031 18.125 3.1543V3.1875C18.123 3.77148 17.6504 4.24805 17.0781 4.24805ZM17.0781 7.8125H13.7305C13.1543 7.8125 12.6836 7.33594 12.6836 6.75195V6.71875C12.6836 6.13477 13.1543 5.6582 13.7305 5.6582H17.0781C17.6543 5.6582 18.125 6.13477 18.125 6.71875V6.75195C18.123 7.33594 17.6504 7.8125 17.0781 7.8125ZM17.0781 11.3809H13.7305C13.1543 11.3809 12.6836 10.9043 12.6836 10.3203V10.2871C12.6836 9.70312 13.1543 9.22656 13.7305 9.22656H17.0781C17.6543 9.22656 18.125 9.70312 18.125 10.2871V10.3203C18.123 10.9043 17.6504 11.3809 17.0781 11.3809ZM16.7949 18.3047H3.24219C2.51172 18.3047 1.91406 17.7012 1.91406 16.959V15.0332C1.91406 14.291 2.51172 13.6875 3.24219 13.6875H16.7949C17.5254 13.6875 18.123 14.291 18.123 15.0332V16.959C18.123 17.7012 17.5254 18.3047 16.7949 18.3047Z" fill="#3681FC"/>
+</svg>

src/assets/images/classObserve/suspend.svg

@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="14" cy="14" r="11" stroke="black" stroke-opacity="0.9" stroke-width="2"/>
+<path d="M10.625 10.5C10.625 9.94772 11.0727 9.5 11.625 9.5H11.85C12.4023 9.5 12.85 9.94772 12.85 10.5V17.5C12.85 18.0523 12.4023 18.5 11.85 18.5H11.625C11.0727 18.5 10.625 18.0523 10.625 17.5V10.5ZM15.125 10.5C15.125 9.94772 15.5727 9.5 16.125 9.5H16.375C16.9273 9.5 17.375 9.94772 17.375 10.5V17.5C17.375 18.0523 16.9273 18.5 16.375 18.5H16.125C15.5727 18.5 15.125 18.0523 15.125 17.5V10.5Z" fill="black" fill-opacity="0.9"/>
+</svg>

src/views/classObserve/components/analysisItem.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="outcomeCon">
     <div @click="showItem" style="height: 50px;display: flex; justify-content: space-between;align-items: center;">
-      <div>
+      <div class="oc_title">
         <van-icon v-if="!show" name="arrow" />
         <van-icon v-else name="arrow-down" />
-        <span class="tit">{{ data.jsonData?data.jsonData.name:'' }}</span>
+        <span class="tit">{{ data.jsonData ? data.jsonData.name : '' }}</span>
       </div>
       <van-popover placement="bottom-end" v-model="abuShow">
         <div class="abu">
@@ -24,16 +24,22 @@
     </div>
     <div v-show="show">
       <div class="brief">
-        {{ data.jsonData?data.jsonData.result:'' }}
+        {{ data.jsonData ? data.jsonData.result : '' }}
+      </div>
+      <div class="content">
+        <!-- {{ data.jsonData }} -->
+        <mdView :text="data.jsonData ? data.jsonData.content : ''" />
       </div>
-			<div class="content">
-				<!-- {{ data.jsonData }} -->
-				<mdView :text="data.jsonData?data.jsonData.content:''"/>
-			</div>
       <div class="outcomeBtn">
-        <div @click.stop="down()"><img src="../../../assets/images/classObserve/revoke.png" alt="" /><span>撤销</span></div>
-        <div @click.stop="up()"><img src="../../../assets/images/classObserve/restore.png" alt="" /><span>恢复</span></div>
-        <div @click.stop="optimize()"><img src="../../../assets/images/classObserve/optimize.png" alt="" /><span>优化</span></div>
+        <div @click.stop="down()">
+          <img src="../../../assets/images/classObserve/revoke.png" alt="" /><span>撤销</span>
+        </div>
+        <div @click.stop="up()">
+          <img src="../../../assets/images/classObserve/restore.png" alt="" /><span>恢复</span>
+        </div>
+        <div @click.stop="optimize()">
+          <img src="../../../assets/images/classObserve/optimize.png" alt="" /><span>优化</span>
+        </div>
       </div>
     </div>
   </div>
@@ -48,9 +54,9 @@ export default {
       default: () => {}
     }
   },
-	components:{
-		mdView
-	},
+  components: {
+    mdView
+  },
   data() {
     return {
       show: false,
@@ -65,18 +71,18 @@ export default {
     abuShowItem() {
       this.abuShow = true
     },
-		up(){
-			console.log("恢复")
-		},
-		down(){
-			console.log("撤销")
-		},
-		optimize(){
-			console.log("优化")
-		},
-		del(){
-			this.$parent.delItem(this.data)
-		}
+    up() {
+      console.log('恢复')
+    },
+    down() {
+      console.log('撤销')
+    },
+    optimize() {
+      console.log('优化')
+    },
+    del() {
+      this.$parent.delItem(this.data)
+    }
   }
 }
 </script>
@@ -90,7 +96,7 @@ export default {
   border-radius: 5px;
   min-height: 40px;
   padding: 0 10px;
-	margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 
 .abu {
@@ -125,8 +131,18 @@ export default {
   }
 }
 
-.brief{
-	font-style: italic;
-	color: #6b798e;
+.brief {
+  font-style: italic;
+  color: #6b798e;
+}
+
+.oc_title {
+	display: flex;
+	align-items: center;
+  .tit {
+    font-size: 16px;
+    font-weight: bold;
+		margin-left: 10px;
+  }
 }
 </style>

src/views/classObserve/components/stencilledCon.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="['stencilledCon',isChoice?'stencilledConActive':'']">
     <div class="top">
-      <div class="tit"><img src="../../../assets/images/classObserve/science.png" alt="" />{{ data.name }}</div>
+      <div class="tit"><img src="../../../assets/images/classObserve/science.svg" alt="" />{{ data.name }}</div>
       <div class="btn">
         <img src="../../../assets/images/classObserve/collect1.svg" alt="" v-if="collectData.findIndex(i=>i.id==data.id)==-1" @click.stop="collect(0)"/>
 				<img src="../../../assets/images/classObserve/collect2.svg" alt="" v-else @click.stop="collect(1)"/>

src/views/classObserve/index.vue

@@ -10,19 +10,25 @@
       :tid="tid"
       :bmData="bmData"
     ></homePage>
-    <bindFrom ref="bindFromRef" @cutPage="cutPage" :page="page" v-if="page == 2" :testData="bmData.jsonData.testData?bmData.jsonData.testData:{}"></bindFrom>
+    <bindFrom
+      ref="bindFromRef"
+      @cutPage="cutPage"
+      :page="page"
+      v-if="page == 2"
+      :testData="bmData.jsonData.testData ? bmData.jsonData.testData : {}"
+    ></bindFrom>
     <classInfo
       ref="classInfoRef"
       @cutPage="cutPage"
       :page="page"
-			:tid="tid"
+      :tid="tid"
       v-if="page == 3"
       v-loading="baseMessageLoading"
       :bmData="bmData"
       :imageList="imageList"
     ></classInfo>
-    <stencilled ref="stencilledRef" @cutPage="cutPage" :page="page" v-if="page == 5 && userId" ></stencilled>
-    <editTel ref="editTelRef" @cutPage="cutPage" :page="page" v-if="page == 6" ></editTel>
+    <stencilled ref="stencilledRef" @cutPage="cutPage" :page="page" v-if="page == 5 && userId"></stencilled>
+    <editTel ref="editTelRef" @cutPage="cutPage" :page="page" v-if="page == 6"></editTel>
     <addTel ref="addTelRef" @cutPage="cutPage" :page="page" v-if="page == 7"></addTel>
     <outcome
       ref="outcomeRef"
@@ -43,8 +49,17 @@ import stencilled from './stencilled'
 import editTel from './editTel'
 import addTel from './addTel'
 import outcome from './outcome.vue'
-import { v4 as uuidv4 } from "uuid";
-import { updateObsRequest, getCourseListRequest, getObsRequest, delClassRequest,delObsRequest,getClassroomDefaultRequest,insertNewClassRoomRequest,insertNewObsRequest } from '@/api/classObserve'
+import { v4 as uuidv4 } from 'uuid'
+import {
+  updateObsRequest,
+  getCourseListRequest,
+  getObsRequest,
+  delClassRequest,
+  delObsRequest,
+  getClassroomDefaultRequest,
+  insertNewClassRoomRequest,
+  insertNewObsRequest
+} from '@/api/classObserve'
 
 export default {
   components: { homePage, bindFrom, classInfo, stencilled, editTel, addTel, outcome },
@@ -117,9 +132,9 @@ export default {
             _optionData = _optionData.filter(i => i.label != '' && i.tId != '')
             this.classList = _optionData
             this.loading = false
-            if (this.classList.length > 0 && !this.tid) {
-              this.changeTid(this.classList[0].value)
-            }
+            // if (this.classList.length > 0 && !this.tid) {
+            //   this.changeTid(this.classList[0].value)
+            // }
             resolve()
           })
           .catch(e => {
@@ -185,9 +200,27 @@ export default {
       delClassRequest({ tid: item.id }).then(_ => {
         this.$toast.success('删除成功')
         this.getCourseList().then(_ => {
-          if (this.tid == item.value || (this.tid == '' && this.classList.length > 0)) {
-            this.changeTid(this.classList[0].value)
+          // if (this.tid == item.value || (this.tid == '' && this.classList.length > 0)) {
+          //   this.changeTid(this.classList[0].value)
+          // }
+          this.tid = ''
+          this.dataList = ''
+          this.bmData = {
+            id: '',
+            tId: '',
+            tIndex: 0,
+            jsonData: {
+              activity_methods: '',
+              activity_structure: '',
+              classroom_resources: '',
+              courseName: '',
+              name: '',
+              studentNum: 0,
+              subject: '',
+              textbook: ''
+            }
           }
+					this.imageList = {};
           this.$refs.homePageRef.historyListLoading = false
         })
       })
@@ -221,7 +254,7 @@ export default {
             let _bmData = _data.find(i => i.tIndex == 0)
             // 基础信息
             _bmData.jsonData = JSON.parse(_bmData.jsonData)
-						_bmData.jsonData.time? "":_bmData.jsonData.time = "";
+            _bmData.jsonData.time ? '' : (_bmData.jsonData.time = '')
             // 图片
             let _imageList = _data.find(i => i.tIndex == 1)
             _imageList.jsonData = JSON.parse(_imageList.jsonData)
@@ -288,188 +321,183 @@ export default {
     getExtendData() {
       return new Promise(resolve => {
         if (!this.tid) return
-        this.extendLoading = true;
-				getObsRequest({tid:this.tid,type:"2"}).then(res=>{
-					let _data = res.FunctionResponse.result.length
-						? JSON.parse(res.FunctionResponse.result)
-						: [];
-					if (_data.length == 0) {
-						return (this.extendLoading = false);
-					}
-					let extent = [];
-					for (let i = 0; i < _data.length; i++) {
-						let _extent = _data[i];
-						_extent.jsonData = JSON.parse(_extent.jsonData);
-						extent.push(_extent);
-					}
-					this.dataList.push(...extent);
-					this.extendLoading = false;
-					resolve();
-				}).catch((e) => {
-					console.log(e);
-					this.$toast("获取扩展分析失败")
-					resolve();
-				});
+        this.extendLoading = true
+        getObsRequest({ tid: this.tid, type: '2' })
+          .then(res => {
+            let _data = res.FunctionResponse.result.length ? JSON.parse(res.FunctionResponse.result) : []
+            if (_data.length == 0) {
+              return (this.extendLoading = false)
+            }
+            let extent = []
+            for (let i = 0; i < _data.length; i++) {
+              let _extent = _data[i]
+              _extent.jsonData = JSON.parse(_extent.jsonData)
+              extent.push(_extent)
+            }
+            this.dataList.push(...extent)
+            this.extendLoading = false
+            resolve()
+          })
+          .catch(e => {
+            console.log(e)
+            this.$toast('获取扩展分析失败')
+            resolve()
+          })
       })
     },
-		//获取全部的数据
+    //获取全部的数据
     getData() {
-			this.dataList = [];
-			this.imageList = {};
+      this.dataList = []
+      this.imageList = {}
       return new Promise(resolve => {
-        Promise.all([this.getCurrencyAndBaseMessageData(),this.getScienceData(),this.getExtendData()]).then(_ => {
+        Promise.all([this.getCurrencyAndBaseMessageData(), this.getScienceData(), this.getExtendData()]).then(_ => {
           console.log('所有分析获取完成')
-					resolve();
+          resolve()
         })
       })
     },
-		//删除分析
-		delAnalysis(item){
-			if(!this.tid)return;
-			this.currencyLoading = true;
-			this.baseMessageLoading = true;
-      this.scienceLoading = true;
-      this.extendLoading = true;
-			delObsRequest({
-				id:item.id,
-				type:item.Type,
-				tid:this.tid
-			}).then(res=>{
-				this.dataList = this.dataList.filter(_item=>_item.id!=item.id);
-				this.$toast.success('删除成功');
-				this.currencyLoading = false;
-				this.baseMessageLoading= false;
-				this.scienceLoading= false;
-				this.extendLoading= false;
-			}).catch(e=>{
-				this.$toast.fail('删除失败');
-				this.currencyLoading = false;
-				this.baseMessageLoading= false;
-				this.scienceLoading= false;
-				this.extendLoading= false;
-			})
-		},
-		//修改分析
-		editAnalysis(item){
-			if(!this.tid)return;
-			this.baseMessageLoading= true;
-      this.scienceLoading= true;
-      this.extendLoading= true;
-			editObsRequest({
-				id:item.id,
-				type:item.Type,
-				tid:this.tid
-			}).then(res=>{
-			})
-		},
-		//获取默认模板并创建课堂
-		addNewCourseByDefault() {
-			// 通过用户ID获取默认的模板
-			var OpenCC = require("opencc-js");
-			let converter = OpenCC.Converter({
-				from: "hk",
-				to: "cn",
-			});
-			return new Promise((resolve,reject)=>{
-				let params = {
-				uid: this.userId,
-			};
-			this.loading = true;
-			getClassroomDefaultRequest(params).then((res) => {
-				let _data = res[0][0];
-				if (_data) {
-					this.loading = true;
-					_data.tips = JSON.parse(_data.tips);
-					let _result = [];
-					_data.tips.forEach((i) => {
-						if(converter("词频词汇分析")==converter(i.jsonData.name))return;
-						let _obj = {
-							jsonData: i.jsonData,
-							type: i.Type,
-							index: i.tIndex,
-						};
-						_result.push(_obj);
-					});
-					this.loading = false;
-					// console.log('👇要生成的模板')
-					// console.log(_result)
-					this.addNewCourseByTemplate(_result).then(_=>{
-						resolve();
-					})
-				}else{
-					this.loading = false;
-					this.$toast.fail("获取模板详细为空");
-				}
-			});
-			})
-			
-		},
-		//通过模板创建新的课堂
-		addNewCourseByTemplate(json = []) {
-			if (json.length <= 0) return;
-			var OpenCC = require("opencc-js");
-			let converter = OpenCC.Converter({
-				from: "hk",
-				to: "cn",
-			});
-			// json = json.filter(i=>converter(i.jsonData.name)!=converter("词频词汇分析"))
-			return new Promise((resolve, reject) => {
-				this.loading = true;
-				const _newTid = uuidv4();
-				let params = {
-					tid: _newTid,
-					userid: this.userId,
-					template: json,
-				};
-				insertNewClassRoomRequest(params)
-					.then((res) => {
-						let _data = res.FunctionResponse;
-						if (converter(_data.message) == converter("创建成功")) {
-							// 设置新课堂的tid
-							// this.tid = params.tid;
-							this.changeTid(_newTid)
-							insertNewObsRequest({
-									tid: params.tid,
-									type: 10,
-									index: 0,
-									json_data: JSON.stringify({ file_ids: "" }),
-									userid: this.userId,
-								})
-								.then((res2) => {
-									let _data2 = res2.FunctionResponse;
-									if (converter(_data2.message) == converter("创建成功")) {
-										this.loading = false;
-										this.$nextTick(() => {
-											this.getCourseList().then(_ => {
-												
-											})
-										// 	this.getCourseList().then((_) => {
-										// 		this.getFileIdId();
-										// 		this.$refs.messageAreaRef.getData();
-										// 		this.$refs.chatAreaRef.getData();
-										// 		resolve();
-										// 	});
-										});
-									} else {
-										this.$toast.fail("创建fileIds失败");
-									}
-								});
-						} else if (converter(_data.message) == converter("tid重复")) {
-							this.$toast.fail("该课堂已存在");
-							this.loading = false;
-						} else {
-							this.$toast.fail("创建失败");
-							this.loading = false;
-						}
-					});
-			});
-		},
+    //删除分析
+    delAnalysis(item) {
+      if (!this.tid) return
+      this.currencyLoading = true
+      this.baseMessageLoading = true
+      this.scienceLoading = true
+      this.extendLoading = true
+      delObsRequest({
+        id: item.id,
+        type: item.Type,
+        tid: this.tid
+      })
+        .then(res => {
+          this.dataList = this.dataList.filter(_item => _item.id != item.id)
+          this.$toast.success('删除成功')
+          this.currencyLoading = false
+          this.baseMessageLoading = false
+          this.scienceLoading = false
+          this.extendLoading = false
+        })
+        .catch(e => {
+          this.$toast.fail('删除失败')
+          this.currencyLoading = false
+          this.baseMessageLoading = false
+          this.scienceLoading = false
+          this.extendLoading = false
+        })
+    },
+    //修改分析
+    editAnalysis(item) {
+      if (!this.tid) return
+      this.baseMessageLoading = true
+      this.scienceLoading = true
+      this.extendLoading = true
+      editObsRequest({
+        id: item.id,
+        type: item.Type,
+        tid: this.tid
+      }).then(res => {})
+    },
+    //获取默认模板并创建课堂
+    addNewCourseByDefault() {
+      // 通过用户ID获取默认的模板
+      var OpenCC = require('opencc-js')
+      let converter = OpenCC.Converter({
+        from: 'hk',
+        to: 'cn'
+      })
+      return new Promise((resolve, reject) => {
+        let params = {
+          uid: this.userId
+        }
+        this.loading = true
+        getClassroomDefaultRequest(params).then(res => {
+          let _data = res[0][0]
+          if (_data) {
+            this.loading = true
+            _data.tips = JSON.parse(_data.tips)
+            let _result = []
+            _data.tips.forEach(i => {
+              if (converter('词频词汇分析') == converter(i.jsonData.name)) return
+              let _obj = {
+                jsonData: i.jsonData,
+                type: i.Type,
+                index: i.tIndex
+              }
+              _result.push(_obj)
+            })
+            this.loading = false
+            // console.log('👇要生成的模板')
+            // console.log(_result)
+            this.addNewCourseByTemplate(_result).then(_ => {
+              resolve()
+            })
+          } else {
+            this.loading = false
+            this.$toast.fail('获取模板详细为空')
+          }
+        })
+      })
+    },
+    //通过模板创建新的课堂
+    addNewCourseByTemplate(json = []) {
+      if (json.length <= 0) return
+      var OpenCC = require('opencc-js')
+      let converter = OpenCC.Converter({
+        from: 'hk',
+        to: 'cn'
+      })
+      // json = json.filter(i=>converter(i.jsonData.name)!=converter("词频词汇分析"))
+      return new Promise((resolve, reject) => {
+        this.loading = true
+        const _newTid = uuidv4()
+        let params = {
+          tid: _newTid,
+          userid: this.userId,
+          template: json
+        }
+        insertNewClassRoomRequest(params).then(res => {
+          let _data = res.FunctionResponse
+          if (converter(_data.message) == converter('创建成功')) {
+            // 设置新课堂的tid
+            // this.tid = params.tid;
+            this.changeTid(_newTid)
+            insertNewObsRequest({
+              tid: params.tid,
+              type: 10,
+              index: 0,
+              json_data: JSON.stringify({ file_ids: '' }),
+              userid: this.userId
+            }).then(res2 => {
+              let _data2 = res2.FunctionResponse
+              if (converter(_data2.message) == converter('创建成功')) {
+                this.loading = false
+                this.$nextTick(() => {
+                  this.getCourseList().then(_ => {})
+                  // 	this.getCourseList().then((_) => {
+                  // 		this.getFileIdId();
+                  // 		this.$refs.messageAreaRef.getData();
+                  // 		this.$refs.chatAreaRef.getData();
+                  // 		resolve();
+                  // 	});
+                })
+              } else {
+                this.$toast.fail('创建fileIds失败')
+              }
+            })
+          } else if (converter(_data.message) == converter('tid重复')) {
+            this.$toast.fail('该课堂已存在')
+            this.loading = false
+          } else {
+            this.$toast.fail('创建失败')
+            this.loading = false
+          }
+        })
+      })
+    }
   },
   mounted() {
     this.getCourseList().then(_ => {
       // if(this.tid=="" && this.classList.length>0){
       // 	this.changeTid(this.classList[0].value);
-
       // }
       // this.getData()
     })

src/views/classObserve/stencilled.vue

@@ -10,7 +10,7 @@
       <div :class="[tagIndex == 0 ? 'sortActive' : '']" @click.stop="changeTagIndex(0)">社区</div>
       <div :class="[tagIndex == 1 ? 'sortActive' : '']" @click.stop="changeTagIndex(1)">我的</div>
       <div :class="[tagIndex == 2 ? 'sortActive' : '']" @click.stop="changeTagIndex(2)">收藏</div>
-      <div @click="reveal" class="sortImg"><img src="../../assets/images/classObserve/filter.png" alt="" /> 筛选</div>
+      <div @click="reveal" class="sortImg"><img src="../../assets/images/classObserve/filter.svg" alt="" /> 筛选</div>
     </div>
     <div class="stencilList" v-loading="loading">
       <div