Pārlūkot izejas kodu

fix:窗内开度需求改版

chenzhen2 1 gadu atpakaļ
vecāks
revīzija
9a32ea6709

+ 5 - 0
public/images/map-new-icon/curtain_down.svg

@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="20" fill="#F1F4F6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.8051 19.8523C26.0655 20.1126 26.0655 20.5347 25.8051 20.7951L20.8363 25.7639C20.3156 26.2846 19.4714 26.2846 18.9507 25.7639L13.9819 20.7951C13.7215 20.5347 13.7215 20.1126 13.9819 19.8523C14.2422 19.5919 14.6643 19.5919 14.9247 19.8523L19.8935 24.8211L24.8623 19.8523C25.1226 19.5919 25.5448 19.5919 25.8051 19.8523Z" fill="#626C78"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.8316 24.9899C19.4634 24.9899 19.165 24.6915 19.165 24.3233V14.5592C19.165 14.1911 19.4634 13.8926 19.8316 13.8926C20.1998 13.8926 20.4983 14.1911 20.4983 14.5592V24.3233C20.4983 24.6915 20.1998 24.9899 19.8316 24.9899Z" fill="#626C78"/>
+</svg>

+ 5 - 0
public/images/map-new-icon/curtain_left.svg

@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="20" fill="#F1F4F6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.8448 15.9023C26.5845 15.6419 26.1624 15.6419 25.902 15.9023L22.4132 19.3911C21.8925 19.9118 21.8925 20.756 22.4132 21.2767L25.902 24.7655C26.1624 25.0259 26.5845 25.0259 26.8448 24.7655C27.1052 24.5052 27.1052 24.0831 26.8448 23.8227L23.356 20.3339L26.8448 16.8451C27.1052 16.5848 27.1052 16.1626 26.8448 15.9023Z" fill="#626C78"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.3818 16.0488C13.6421 15.7884 14.0642 15.7884 14.3246 16.0488L17.667 19.3912C18.1877 19.9119 18.1877 20.7561 17.667 21.2768L14.3246 24.6192C14.0642 24.8795 13.6421 24.8795 13.3818 24.6192C13.1214 24.3588 13.1214 23.9367 13.3818 23.6764L16.7242 20.334L13.3818 16.9916C13.1214 16.7312 13.1214 16.3091 13.3818 16.0488Z" fill="#626C78"/>
+</svg>

+ 12 - 0
public/images/map-new-icon/curtain_right.svg

@@ -0,0 +1,12 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="20" fill="#F1F4F6"/>
+<g clip-path="url(#clip0_2414_59132)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.2353 15.9023C23.4956 15.6419 23.9177 15.6419 24.1781 15.9023L27.6669 19.3911C28.1876 19.9118 28.1876 20.756 27.6669 21.2767L24.1781 24.7655C23.9177 25.0259 23.4956 25.0259 23.2353 24.7655C22.9749 24.5052 22.9749 24.0831 23.2353 23.8227L26.7241 20.3339L23.2353 16.8451C22.9749 16.5848 22.9749 16.1626 23.2353 15.9023Z" fill="#626C78"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9912 16.0488C16.7308 15.7884 16.3087 15.7884 16.0483 16.0488L12.706 19.3912C12.1853 19.9119 12.1853 20.7561 12.706 21.2768L16.0483 24.6192C16.3087 24.8795 16.7308 24.8795 16.9912 24.6192C17.2515 24.3588 17.2515 23.9367 16.9912 23.6764L13.6488 20.334L16.9912 16.9916C17.2515 16.7312 17.2515 16.3091 16.9912 16.0488Z" fill="#626C78"/>
+</g>
+<defs>
+<clipPath id="clip0_2414_59132">
+<rect width="16" height="16" fill="white" transform="translate(12 12)"/>
+</clipPath>
+</defs>
+</svg>

+ 5 - 0
public/images/map-new-icon/curtain_stop.svg

@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="20" fill="#F1F4F6"/>
+<rect x="15.3335" y="14.667" width="1.33333" height="10.6667" rx="0.666667" fill="#626C78"/>
+<rect x="23.333" y="14.667" width="1.33333" height="10.6667" rx="0.666667" fill="#626C78"/>
+</svg>

+ 3 - 0
public/images/map-new-icon/curtain_up.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="20" fill="#F1F4F6"/>
+</svg>

+ 0 - 12
public/images/page-officehome/curtain_close.svg

@@ -1,12 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<rect x="0.75" y="0.75" width="16.5" height="3" stroke="#C4C4C4" stroke-width="1.5"/>
-<path d="M0.75 3.75004C0.75 3.75004 9 3.75001 9.375 3.75004C9.375 6.75003 9.375 13.1199 9.375 16.875C9.375 16.875 7.875 17.25 6 17.25C4.31586 17.25 0.75 17.25 0.75 17.25V3.75004Z" stroke="#C4C4C4" stroke-width="1.5"/>
-<path d="M9.375 3.75004H17.3438V17.25C17.3438 17.25 14.4036 16.8387 12.75 16.875C11.4242 16.9042 9 17.25 9 17.25" stroke="#C4C4C4" stroke-width="1.5"/>
-</g>
-<defs>
-<clipPath id="clip0">
-<rect width="18" height="18" fill="white"/>
-</clipPath>
-</defs>
-</svg>

BIN
public/images/page-officehome/curtain_close_bg.png


+ 5 - 0
public/images/page-officehome/curtain_down.svg

@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="20" fill="#F1F4F6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.8051 19.8523C26.0655 20.1126 26.0655 20.5347 25.8051 20.7951L20.8363 25.7639C20.3156 26.2846 19.4714 26.2846 18.9507 25.7639L13.9819 20.7951C13.7215 20.5347 13.7215 20.1126 13.9819 19.8523C14.2422 19.5919 14.6643 19.5919 14.9247 19.8523L19.8935 24.8211L24.8623 19.8523C25.1226 19.5919 25.5448 19.5919 25.8051 19.8523Z" fill="#626C78"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.8316 24.9899C19.4634 24.9899 19.165 24.6915 19.165 24.3233V14.5592C19.165 14.1911 19.4634 13.8926 19.8316 13.8926C20.1998 13.8926 20.4983 14.1911 20.4983 14.5592V24.3233C20.4983 24.6915 20.1998 24.9899 19.8316 24.9899Z" fill="#626C78"/>
+</svg>

+ 5 - 0
public/images/page-officehome/curtain_left.svg

@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="20" fill="#F1F4F6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.8448 15.9023C26.5845 15.6419 26.1624 15.6419 25.902 15.9023L22.4132 19.3911C21.8925 19.9118 21.8925 20.756 22.4132 21.2767L25.902 24.7655C26.1624 25.0259 26.5845 25.0259 26.8448 24.7655C27.1052 24.5052 27.1052 24.0831 26.8448 23.8227L23.356 20.3339L26.8448 16.8451C27.1052 16.5848 27.1052 16.1626 26.8448 15.9023Z" fill="#626C78"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.3818 16.0488C13.6421 15.7884 14.0642 15.7884 14.3246 16.0488L17.667 19.3912C18.1877 19.9119 18.1877 20.7561 17.667 21.2768L14.3246 24.6192C14.0642 24.8795 13.6421 24.8795 13.3818 24.6192C13.1214 24.3588 13.1214 23.9367 13.3818 23.6764L16.7242 20.334L13.3818 16.9916C13.1214 16.7312 13.1214 16.3091 13.3818 16.0488Z" fill="#626C78"/>
+</svg>

+ 550 - 0
public/images/page-officehome/curtain_new.svg

@@ -0,0 +1,550 @@
+<svg width="100" height="63" viewBox="0 0 100 63" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="4" width="100" height="2" rx="1" fill="url(#paint0_linear_3093_15458)"/>
+<path d="M54 0.5C56.1389 0.5 55.9797 1.91044 57.4909 1.88672C59.0021 1.86299 58.8611 0.5 61 0.5V62.5C59.0062 62.5 58.7947 61.5596 57.5 61.5596C56.2053 61.5596 55.4934 62.5 54 62.5V0.5Z" fill="url(#paint1_linear_3093_15458)"/>
+<mask id="mask0_3093_15458" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="54" y="0" width="7" height="63">
+<path d="M54 0.5C56.1389 0.5 55.9797 1.91044 57.4909 1.88672C59.0021 1.86299 58.8611 0.5 61 0.5V62.5C59.0062 62.5 58.7947 61.5596 57.5 61.5596C56.2053 61.5596 55.4934 62.5 54 62.5V0.5Z" fill="url(#paint2_linear_3093_15458)"/>
+</mask>
+<g mask="url(#mask0_3093_15458)">
+<g filter="url(#filter0_f_3093_15458)">
+<ellipse cx="54.5" cy="58.5" rx="9.5" ry="29" fill="white" fill-opacity="0.4"/>
+</g>
+</g>
+<mask id="path-5-inside-1_3093_15458" fill="white">
+<path d="M55.7158 4.82051C55.7158 4.37868 56.074 4.02051 56.5158 4.02051H58.9158C59.3576 4.02051 59.7158 4.37868 59.7158 4.82051V5.22051C59.7158 5.66234 59.3576 6.02051 58.9158 6.02051H56.5158C56.074 6.02051 55.7158 5.66234 55.7158 5.22051V4.82051Z"/>
+</mask>
+<path d="M55.7158 4.82051C55.7158 4.37868 56.074 4.02051 56.5158 4.02051H58.9158C59.3576 4.02051 59.7158 4.37868 59.7158 4.82051V5.22051C59.7158 5.66234 59.3576 6.02051 58.9158 6.02051H56.5158C56.074 6.02051 55.7158 5.66234 55.7158 5.22051V4.82051Z" fill="url(#paint3_linear_3093_15458)"/>
+<path d="M55.7158 4.02051H59.7158H55.7158ZM59.7158 6.02051H55.7158H59.7158ZM56.5158 6.02051C55.9635 6.02051 55.5158 5.57279 55.5158 5.02051C55.5158 4.46822 55.9635 4.02051 56.5158 4.02051C56.1844 4.02051 55.9158 4.37868 55.9158 4.82051V5.22051C55.9158 5.66234 56.1844 6.02051 56.5158 6.02051ZM59.7158 4.02051V6.02051V4.02051Z" fill="#AEAEAE" mask="url(#path-5-inside-1_3093_15458)"/>
+<path d="M61 0.5C63.1389 0.5 62.9797 1.91044 64.4909 1.88672C66.0021 1.86299 65.8611 0.5 68 0.5V62.5C66.0062 62.5 65.7947 61.5596 64.5 61.5596C63.2053 61.5596 62.4934 62.5 61 62.5V0.5Z" fill="url(#paint4_linear_3093_15458)"/>
+<mask id="mask1_3093_15458" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="61" y="0" width="7" height="63">
+<path d="M61 0.5C63.1389 0.5 62.9797 1.91044 64.4909 1.88672C66.0021 1.86299 65.8611 0.5 68 0.5V62.5C66.0062 62.5 65.7947 61.5596 64.5 61.5596C63.2053 61.5596 62.4934 62.5 61 62.5V0.5Z" fill="url(#paint5_linear_3093_15458)"/>
+</mask>
+<g mask="url(#mask1_3093_15458)">
+<g filter="url(#filter1_f_3093_15458)">
+<ellipse cx="61.5" cy="58.5" rx="9.5" ry="29" fill="white" fill-opacity="0.4"/>
+</g>
+</g>
+<mask id="path-10-inside-2_3093_15458" fill="white">
+<path d="M62.7158 4.82051C62.7158 4.37868 63.074 4.02051 63.5158 4.02051H65.9158C66.3576 4.02051 66.7158 4.37868 66.7158 4.82051V5.22051C66.7158 5.66234 66.3576 6.02051 65.9158 6.02051H63.5158C63.074 6.02051 62.7158 5.66234 62.7158 5.22051V4.82051Z"/>
+</mask>
+<path d="M62.7158 4.82051C62.7158 4.37868 63.074 4.02051 63.5158 4.02051H65.9158C66.3576 4.02051 66.7158 4.37868 66.7158 4.82051V5.22051C66.7158 5.66234 66.3576 6.02051 65.9158 6.02051H63.5158C63.074 6.02051 62.7158 5.66234 62.7158 5.22051V4.82051Z" fill="url(#paint6_linear_3093_15458)"/>
+<path d="M62.7158 4.02051H66.7158H62.7158ZM66.7158 6.02051H62.7158H66.7158ZM63.5158 6.02051C62.9635 6.02051 62.5158 5.57279 62.5158 5.02051C62.5158 4.46822 62.9635 4.02051 63.5158 4.02051C63.1844 4.02051 62.9158 4.37868 62.9158 4.82051V5.22051C62.9158 5.66234 63.1844 6.02051 63.5158 6.02051ZM66.7158 4.02051V6.02051V4.02051Z" fill="#AEAEAE" mask="url(#path-10-inside-2_3093_15458)"/>
+<path d="M68 0.5C70.1389 0.5 69.9797 1.91044 71.4909 1.88672C73.0021 1.86299 72.8611 0.5 75 0.5V62.5C73.0062 62.5 72.7947 61.5596 71.5 61.5596C70.2053 61.5596 69.4934 62.5 68 62.5V0.5Z" fill="url(#paint7_linear_3093_15458)"/>
+<mask id="mask2_3093_15458" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="68" y="0" width="7" height="63">
+<path d="M68 0.5C70.1389 0.5 69.9797 1.91044 71.4909 1.88672C73.0021 1.86299 72.8611 0.5 75 0.5V62.5C73.0062 62.5 72.7947 61.5596 71.5 61.5596C70.2053 61.5596 69.4934 62.5 68 62.5V0.5Z" fill="url(#paint8_linear_3093_15458)"/>
+</mask>
+<g mask="url(#mask2_3093_15458)">
+<g filter="url(#filter2_f_3093_15458)">
+<ellipse cx="68.5" cy="58.5" rx="9.5" ry="29" fill="white" fill-opacity="0.4"/>
+</g>
+</g>
+<mask id="path-15-inside-3_3093_15458" fill="white">
+<path d="M69.7158 4.82051C69.7158 4.37868 70.074 4.02051 70.5158 4.02051H72.9158C73.3576 4.02051 73.7158 4.37868 73.7158 4.82051V5.22051C73.7158 5.66234 73.3576 6.02051 72.9158 6.02051H70.5158C70.074 6.02051 69.7158 5.66234 69.7158 5.22051V4.82051Z"/>
+</mask>
+<path d="M69.7158 4.82051C69.7158 4.37868 70.074 4.02051 70.5158 4.02051H72.9158C73.3576 4.02051 73.7158 4.37868 73.7158 4.82051V5.22051C73.7158 5.66234 73.3576 6.02051 72.9158 6.02051H70.5158C70.074 6.02051 69.7158 5.66234 69.7158 5.22051V4.82051Z" fill="url(#paint9_linear_3093_15458)"/>
+<path d="M69.7158 4.02051H73.7158H69.7158ZM73.7158 6.02051H69.7158H73.7158ZM70.5158 6.02051C69.9635 6.02051 69.5158 5.57279 69.5158 5.02051C69.5158 4.46822 69.9635 4.02051 70.5158 4.02051C70.1844 4.02051 69.9158 4.37868 69.9158 4.82051V5.22051C69.9158 5.66234 70.1844 6.02051 70.5158 6.02051ZM73.7158 4.02051V6.02051V4.02051Z" fill="#AEAEAE" mask="url(#path-15-inside-3_3093_15458)"/>
+<path d="M75 0.5C77.1389 0.5 76.9797 1.91044 78.4909 1.88672C80.0021 1.86299 79.8611 0.5 82 0.5V62.5C80.0062 62.5 79.7947 61.5596 78.5 61.5596C77.2053 61.5596 76.4934 62.5 75 62.5V0.5Z" fill="url(#paint10_linear_3093_15458)"/>
+<mask id="mask3_3093_15458" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="75" y="0" width="7" height="63">
+<path d="M75 0.5C77.1389 0.5 76.9797 1.91044 78.4909 1.88672C80.0021 1.86299 79.8611 0.5 82 0.5V62.5C80.0062 62.5 79.7947 61.5596 78.5 61.5596C77.2053 61.5596 76.4934 62.5 75 62.5V0.5Z" fill="url(#paint11_linear_3093_15458)"/>
+</mask>
+<g mask="url(#mask3_3093_15458)">
+<g filter="url(#filter3_f_3093_15458)">
+<ellipse cx="75.5" cy="58.5" rx="9.5" ry="29" fill="white" fill-opacity="0.4"/>
+</g>
+</g>
+<mask id="path-20-inside-4_3093_15458" fill="white">
+<path d="M76.7158 4.82051C76.7158 4.37868 77.074 4.02051 77.5158 4.02051H79.9158C80.3576 4.02051 80.7158 4.37868 80.7158 4.82051V5.22051C80.7158 5.66234 80.3576 6.02051 79.9158 6.02051H77.5158C77.074 6.02051 76.7158 5.66234 76.7158 5.22051V4.82051Z"/>
+</mask>
+<path d="M76.7158 4.82051C76.7158 4.37868 77.074 4.02051 77.5158 4.02051H79.9158C80.3576 4.02051 80.7158 4.37868 80.7158 4.82051V5.22051C80.7158 5.66234 80.3576 6.02051 79.9158 6.02051H77.5158C77.074 6.02051 76.7158 5.66234 76.7158 5.22051V4.82051Z" fill="url(#paint12_linear_3093_15458)"/>
+<path d="M76.7158 4.02051H80.7158H76.7158ZM80.7158 6.02051H76.7158H80.7158ZM77.5158 6.02051C76.9635 6.02051 76.5158 5.57279 76.5158 5.02051C76.5158 4.46822 76.9635 4.02051 77.5158 4.02051C77.1844 4.02051 76.9158 4.37868 76.9158 4.82051V5.22051C76.9158 5.66234 77.1844 6.02051 77.5158 6.02051ZM80.7158 4.02051V6.02051V4.02051Z" fill="#AEAEAE" mask="url(#path-20-inside-4_3093_15458)"/>
+<path d="M82 0.5C84.1389 0.5 83.9797 1.91044 85.4909 1.88672C87.0021 1.86299 86.8611 0.5 89 0.5V62.5C87.0062 62.5 86.7947 61.5596 85.5 61.5596C84.2053 61.5596 83.4934 62.5 82 62.5V0.5Z" fill="url(#paint13_linear_3093_15458)"/>
+<mask id="mask4_3093_15458" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="82" y="0" width="7" height="63">
+<path d="M82 0.5C84.1389 0.5 83.9797 1.91044 85.4909 1.88672C87.0021 1.86299 86.8611 0.5 89 0.5V62.5C87.0062 62.5 86.7947 61.5596 85.5 61.5596C84.2053 61.5596 83.4934 62.5 82 62.5V0.5Z" fill="url(#paint14_linear_3093_15458)"/>
+</mask>
+<g mask="url(#mask4_3093_15458)">
+<g filter="url(#filter4_f_3093_15458)">
+<ellipse cx="82.5" cy="58.5" rx="9.5" ry="29" fill="white" fill-opacity="0.4"/>
+</g>
+</g>
+<mask id="path-25-inside-5_3093_15458" fill="white">
+<path d="M83.7158 4.82051C83.7158 4.37868 84.074 4.02051 84.5158 4.02051H86.9158C87.3576 4.02051 87.7158 4.37868 87.7158 4.82051V5.22051C87.7158 5.66234 87.3576 6.02051 86.9158 6.02051H84.5158C84.074 6.02051 83.7158 5.66234 83.7158 5.22051V4.82051Z"/>
+</mask>
+<path d="M83.7158 4.82051C83.7158 4.37868 84.074 4.02051 84.5158 4.02051H86.9158C87.3576 4.02051 87.7158 4.37868 87.7158 4.82051V5.22051C87.7158 5.66234 87.3576 6.02051 86.9158 6.02051H84.5158C84.074 6.02051 83.7158 5.66234 83.7158 5.22051V4.82051Z" fill="url(#paint15_linear_3093_15458)"/>
+<path d="M83.7158 4.02051H87.7158H83.7158ZM87.7158 6.02051H83.7158H87.7158ZM84.5158 6.02051C83.9635 6.02051 83.5158 5.57279 83.5158 5.02051C83.5158 4.46822 83.9635 4.02051 84.5158 4.02051C84.1844 4.02051 83.9158 4.37868 83.9158 4.82051V5.22051C83.9158 5.66234 84.1844 6.02051 84.5158 6.02051ZM87.7158 4.02051V6.02051V4.02051Z" fill="#AEAEAE" mask="url(#path-25-inside-5_3093_15458)"/>
+<path d="M89 0.5C91.1389 0.5 90.9797 1.91044 92.4909 1.88672C94.0021 1.86299 93.8611 0.5 96 0.5V62.5C94.0062 62.5 93.7947 61.5596 92.5 61.5596C91.2053 61.5596 90.4934 62.5 89 62.5V0.5Z" fill="url(#paint16_linear_3093_15458)"/>
+<mask id="mask5_3093_15458" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="89" y="0" width="7" height="63">
+<path d="M89 0.5C91.1389 0.5 90.9797 1.91044 92.4909 1.88672C94.0021 1.86299 93.8611 0.5 96 0.5V62.5C94.0062 62.5 93.7947 61.5596 92.5 61.5596C91.2053 61.5596 90.4934 62.5 89 62.5V0.5Z" fill="url(#paint17_linear_3093_15458)"/>
+</mask>
+<g mask="url(#mask5_3093_15458)">
+<g filter="url(#filter5_f_3093_15458)">
+<ellipse cx="89.5" cy="58.5" rx="9.5" ry="29" fill="white" fill-opacity="0.4"/>
+</g>
+</g>
+<mask id="path-30-inside-6_3093_15458" fill="white">
+<path d="M90.7158 4.82051C90.7158 4.37868 91.074 4.02051 91.5158 4.02051H93.9158C94.3576 4.02051 94.7158 4.37868 94.7158 4.82051V5.22051C94.7158 5.66234 94.3576 6.02051 93.9158 6.02051H91.5158C91.074 6.02051 90.7158 5.66234 90.7158 5.22051V4.82051Z"/>
+</mask>
+<path d="M90.7158 4.82051C90.7158 4.37868 91.074 4.02051 91.5158 4.02051H93.9158C94.3576 4.02051 94.7158 4.37868 94.7158 4.82051V5.22051C94.7158 5.66234 94.3576 6.02051 93.9158 6.02051H91.5158C91.074 6.02051 90.7158 5.66234 90.7158 5.22051V4.82051Z" fill="url(#paint18_linear_3093_15458)"/>
+<path d="M90.7158 4.02051H94.7158H90.7158ZM94.7158 6.02051H90.7158H94.7158ZM91.5158 6.02051C90.9635 6.02051 90.5158 5.57279 90.5158 5.02051C90.5158 4.46822 90.9635 4.02051 91.5158 4.02051C91.1844 4.02051 90.9158 4.37868 90.9158 4.82051V5.22051C90.9158 5.66234 91.1844 6.02051 91.5158 6.02051ZM94.7158 4.02051V6.02051V4.02051Z" fill="#AEAEAE" mask="url(#path-30-inside-6_3093_15458)"/>
+<path d="M4 0.5C6.13889 0.5 5.97967 1.91044 7.49089 1.88672C9.0021 1.86299 8.86111 0.5 11 0.5V62.5C9.00616 62.5 8.79466 61.5596 7.5 61.5596C6.20535 61.5596 5.49336 62.5 4 62.5V0.5Z" fill="url(#paint19_linear_3093_15458)"/>
+<mask id="mask6_3093_15458" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="4" y="0" width="7" height="63">
+<path d="M4 0.5C6.13889 0.5 5.97967 1.91044 7.49089 1.88672C9.0021 1.86299 8.86111 0.5 11 0.5V62.5C9.00616 62.5 8.79466 61.5596 7.5 61.5596C6.20535 61.5596 5.49336 62.5 4 62.5V0.5Z" fill="url(#paint20_linear_3093_15458)"/>
+</mask>
+<g mask="url(#mask6_3093_15458)">
+<g filter="url(#filter6_f_3093_15458)">
+<ellipse cx="4.5" cy="58.5" rx="9.5" ry="29" fill="white" fill-opacity="0.4"/>
+</g>
+</g>
+<mask id="path-35-inside-7_3093_15458" fill="white">
+<path d="M5.71582 4.82051C5.71582 4.37868 6.07399 4.02051 6.51582 4.02051H8.91582C9.35765 4.02051 9.71582 4.37868 9.71582 4.82051V5.22051C9.71582 5.66234 9.35765 6.02051 8.91582 6.02051H6.51582C6.07399 6.02051 5.71582 5.66234 5.71582 5.22051V4.82051Z"/>
+</mask>
+<path d="M5.71582 4.82051C5.71582 4.37868 6.07399 4.02051 6.51582 4.02051H8.91582C9.35765 4.02051 9.71582 4.37868 9.71582 4.82051V5.22051C9.71582 5.66234 9.35765 6.02051 8.91582 6.02051H6.51582C6.07399 6.02051 5.71582 5.66234 5.71582 5.22051V4.82051Z" fill="url(#paint21_linear_3093_15458)"/>
+<path d="M5.71582 4.02051H9.71582H5.71582ZM9.71582 6.02051H5.71582H9.71582ZM6.51582 6.02051C5.96354 6.02051 5.51582 5.57279 5.51582 5.02051C5.51582 4.46822 5.96354 4.02051 6.51582 4.02051C6.18445 4.02051 5.91582 4.37868 5.91582 4.82051V5.22051C5.91582 5.66234 6.18445 6.02051 6.51582 6.02051ZM9.71582 4.02051V6.02051V4.02051Z" fill="#AEAEAE" mask="url(#path-35-inside-7_3093_15458)"/>
+<path d="M11 0.5C13.1389 0.5 12.9797 1.91044 14.4909 1.88672C16.0021 1.86299 15.8611 0.5 18 0.5V62.5C16.0062 62.5 15.7947 61.5596 14.5 61.5596C13.2053 61.5596 12.4934 62.5 11 62.5V0.5Z" fill="url(#paint22_linear_3093_15458)"/>
+<mask id="mask7_3093_15458" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="11" y="0" width="7" height="63">
+<path d="M11 0.5C13.1389 0.5 12.9797 1.91044 14.4909 1.88672C16.0021 1.86299 15.8611 0.5 18 0.5V62.5C16.0062 62.5 15.7947 61.5596 14.5 61.5596C13.2053 61.5596 12.4934 62.5 11 62.5V0.5Z" fill="url(#paint23_linear_3093_15458)"/>
+</mask>
+<g mask="url(#mask7_3093_15458)">
+<g filter="url(#filter7_f_3093_15458)">
+<ellipse cx="11.5" cy="58.5" rx="9.5" ry="29" fill="white" fill-opacity="0.4"/>
+</g>
+</g>
+<mask id="path-40-inside-8_3093_15458" fill="white">
+<path d="M12.7158 4.82051C12.7158 4.37868 13.074 4.02051 13.5158 4.02051H15.9158C16.3576 4.02051 16.7158 4.37868 16.7158 4.82051V5.22051C16.7158 5.66234 16.3576 6.02051 15.9158 6.02051H13.5158C13.074 6.02051 12.7158 5.66234 12.7158 5.22051V4.82051Z"/>
+</mask>
+<path d="M12.7158 4.82051C12.7158 4.37868 13.074 4.02051 13.5158 4.02051H15.9158C16.3576 4.02051 16.7158 4.37868 16.7158 4.82051V5.22051C16.7158 5.66234 16.3576 6.02051 15.9158 6.02051H13.5158C13.074 6.02051 12.7158 5.66234 12.7158 5.22051V4.82051Z" fill="url(#paint24_linear_3093_15458)"/>
+<path d="M12.7158 4.02051H16.7158H12.7158ZM16.7158 6.02051H12.7158H16.7158ZM13.5158 6.02051C12.9635 6.02051 12.5158 5.57279 12.5158 5.02051C12.5158 4.46822 12.9635 4.02051 13.5158 4.02051C13.1844 4.02051 12.9158 4.37868 12.9158 4.82051V5.22051C12.9158 5.66234 13.1844 6.02051 13.5158 6.02051ZM16.7158 4.02051V6.02051V4.02051Z" fill="#AEAEAE" mask="url(#path-40-inside-8_3093_15458)"/>
+<path d="M18 0.5C20.1389 0.5 19.9797 1.91044 21.4909 1.88672C23.0021 1.86299 22.8611 0.5 25 0.5V62.5C23.0062 62.5 22.7947 61.5596 21.5 61.5596C20.2053 61.5596 19.4934 62.5 18 62.5V0.5Z" fill="url(#paint25_linear_3093_15458)"/>
+<mask id="mask8_3093_15458" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="18" y="0" width="7" height="63">
+<path d="M18 0.5C20.1389 0.5 19.9797 1.91044 21.4909 1.88672C23.0021 1.86299 22.8611 0.5 25 0.5V62.5C23.0062 62.5 22.7947 61.5596 21.5 61.5596C20.2053 61.5596 19.4934 62.5 18 62.5V0.5Z" fill="url(#paint26_linear_3093_15458)"/>
+</mask>
+<g mask="url(#mask8_3093_15458)">
+<g filter="url(#filter8_f_3093_15458)">
+<ellipse cx="18.5" cy="58.5" rx="9.5" ry="29" fill="white" fill-opacity="0.4"/>
+</g>
+</g>
+<mask id="path-45-inside-9_3093_15458" fill="white">
+<path d="M19.7158 4.82051C19.7158 4.37868 20.074 4.02051 20.5158 4.02051H22.9158C23.3576 4.02051 23.7158 4.37868 23.7158 4.82051V5.22051C23.7158 5.66234 23.3576 6.02051 22.9158 6.02051H20.5158C20.074 6.02051 19.7158 5.66234 19.7158 5.22051V4.82051Z"/>
+</mask>
+<path d="M19.7158 4.82051C19.7158 4.37868 20.074 4.02051 20.5158 4.02051H22.9158C23.3576 4.02051 23.7158 4.37868 23.7158 4.82051V5.22051C23.7158 5.66234 23.3576 6.02051 22.9158 6.02051H20.5158C20.074 6.02051 19.7158 5.66234 19.7158 5.22051V4.82051Z" fill="url(#paint27_linear_3093_15458)"/>
+<path d="M19.7158 4.02051H23.7158H19.7158ZM23.7158 6.02051H19.7158H23.7158ZM20.5158 6.02051C19.9635 6.02051 19.5158 5.57279 19.5158 5.02051C19.5158 4.46822 19.9635 4.02051 20.5158 4.02051C20.1844 4.02051 19.9158 4.37868 19.9158 4.82051V5.22051C19.9158 5.66234 20.1844 6.02051 20.5158 6.02051ZM23.7158 4.02051V6.02051V4.02051Z" fill="#AEAEAE" mask="url(#path-45-inside-9_3093_15458)"/>
+<path d="M25 0.5C27.1389 0.5 26.9797 1.91044 28.4909 1.88672C30.0021 1.86299 29.8611 0.5 32 0.5V62.5C30.0062 62.5 29.7947 61.5596 28.5 61.5596C27.2053 61.5596 26.4934 62.5 25 62.5V0.5Z" fill="url(#paint28_linear_3093_15458)"/>
+<mask id="mask9_3093_15458" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="25" y="0" width="7" height="63">
+<path d="M25 0.5C27.1389 0.5 26.9797 1.91044 28.4909 1.88672C30.0021 1.86299 29.8611 0.5 32 0.5V62.5C30.0062 62.5 29.7947 61.5596 28.5 61.5596C27.2053 61.5596 26.4934 62.5 25 62.5V0.5Z" fill="url(#paint29_linear_3093_15458)"/>
+</mask>
+<g mask="url(#mask9_3093_15458)">
+<g filter="url(#filter9_f_3093_15458)">
+<ellipse cx="25.5" cy="58.5" rx="9.5" ry="29" fill="white" fill-opacity="0.4"/>
+</g>
+</g>
+<mask id="path-50-inside-10_3093_15458" fill="white">
+<path d="M26.7158 4.82051C26.7158 4.37868 27.074 4.02051 27.5158 4.02051H29.9158C30.3576 4.02051 30.7158 4.37868 30.7158 4.82051V5.22051C30.7158 5.66234 30.3576 6.02051 29.9158 6.02051H27.5158C27.074 6.02051 26.7158 5.66234 26.7158 5.22051V4.82051Z"/>
+</mask>
+<path d="M26.7158 4.82051C26.7158 4.37868 27.074 4.02051 27.5158 4.02051H29.9158C30.3576 4.02051 30.7158 4.37868 30.7158 4.82051V5.22051C30.7158 5.66234 30.3576 6.02051 29.9158 6.02051H27.5158C27.074 6.02051 26.7158 5.66234 26.7158 5.22051V4.82051Z" fill="url(#paint30_linear_3093_15458)"/>
+<path d="M26.7158 4.02051H30.7158H26.7158ZM30.7158 6.02051H26.7158H30.7158ZM27.5158 6.02051C26.9635 6.02051 26.5158 5.57279 26.5158 5.02051C26.5158 4.46822 26.9635 4.02051 27.5158 4.02051C27.1844 4.02051 26.9158 4.37868 26.9158 4.82051V5.22051C26.9158 5.66234 27.1844 6.02051 27.5158 6.02051ZM30.7158 4.02051V6.02051V4.02051Z" fill="#AEAEAE" mask="url(#path-50-inside-10_3093_15458)"/>
+<path d="M32 0.5C34.1389 0.5 33.9797 1.91044 35.4909 1.88672C37.0021 1.86299 36.8611 0.5 39 0.5V62.5C37.0062 62.5 36.7947 61.5596 35.5 61.5596C34.2053 61.5596 33.4934 62.5 32 62.5V0.5Z" fill="url(#paint31_linear_3093_15458)"/>
+<mask id="mask10_3093_15458" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="32" y="0" width="7" height="63">
+<path d="M32 0.5C34.1389 0.5 33.9797 1.91044 35.4909 1.88672C37.0021 1.86299 36.8611 0.5 39 0.5V62.5C37.0062 62.5 36.7947 61.5596 35.5 61.5596C34.2053 61.5596 33.4934 62.5 32 62.5V0.5Z" fill="url(#paint32_linear_3093_15458)"/>
+</mask>
+<g mask="url(#mask10_3093_15458)">
+<g filter="url(#filter10_f_3093_15458)">
+<ellipse cx="32.5" cy="58.5" rx="9.5" ry="29" fill="white" fill-opacity="0.4"/>
+</g>
+</g>
+<mask id="path-55-inside-11_3093_15458" fill="white">
+<path d="M33.7158 4.82051C33.7158 4.37868 34.074 4.02051 34.5158 4.02051H36.9158C37.3576 4.02051 37.7158 4.37868 37.7158 4.82051V5.22051C37.7158 5.66234 37.3576 6.02051 36.9158 6.02051H34.5158C34.074 6.02051 33.7158 5.66234 33.7158 5.22051V4.82051Z"/>
+</mask>
+<path d="M33.7158 4.82051C33.7158 4.37868 34.074 4.02051 34.5158 4.02051H36.9158C37.3576 4.02051 37.7158 4.37868 37.7158 4.82051V5.22051C37.7158 5.66234 37.3576 6.02051 36.9158 6.02051H34.5158C34.074 6.02051 33.7158 5.66234 33.7158 5.22051V4.82051Z" fill="url(#paint33_linear_3093_15458)"/>
+<path d="M33.7158 4.02051H37.7158H33.7158ZM37.7158 6.02051H33.7158H37.7158ZM34.5158 6.02051C33.9635 6.02051 33.5158 5.57279 33.5158 5.02051C33.5158 4.46822 33.9635 4.02051 34.5158 4.02051C34.1844 4.02051 33.9158 4.37868 33.9158 4.82051V5.22051C33.9158 5.66234 34.1844 6.02051 34.5158 6.02051ZM37.7158 4.02051V6.02051V4.02051Z" fill="#AEAEAE" mask="url(#path-55-inside-11_3093_15458)"/>
+<path d="M39 0.5C41.1389 0.5 40.9797 1.91044 42.4909 1.88672C44.0021 1.86299 43.8611 0.5 46 0.5V62.5C44.0062 62.5 43.7947 61.5596 42.5 61.5596C41.2053 61.5596 40.4934 62.5 39 62.5V0.5Z" fill="url(#paint34_linear_3093_15458)"/>
+<mask id="mask11_3093_15458" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="39" y="0" width="7" height="63">
+<path d="M39 0.5C41.1389 0.5 40.9797 1.91044 42.4909 1.88672C44.0021 1.86299 43.8611 0.5 46 0.5V62.5C44.0062 62.5 43.7947 61.5596 42.5 61.5596C41.2053 61.5596 40.4934 62.5 39 62.5V0.5Z" fill="url(#paint35_linear_3093_15458)"/>
+</mask>
+<g mask="url(#mask11_3093_15458)">
+<g filter="url(#filter11_f_3093_15458)">
+<ellipse cx="39.5" cy="58.5" rx="9.5" ry="29" fill="white" fill-opacity="0.4"/>
+</g>
+</g>
+<mask id="path-60-inside-12_3093_15458" fill="white">
+<path d="M40.7158 4.82051C40.7158 4.37868 41.074 4.02051 41.5158 4.02051H43.9158C44.3576 4.02051 44.7158 4.37868 44.7158 4.82051V5.22051C44.7158 5.66234 44.3576 6.02051 43.9158 6.02051H41.5158C41.074 6.02051 40.7158 5.66234 40.7158 5.22051V4.82051Z"/>
+</mask>
+<path d="M40.7158 4.82051C40.7158 4.37868 41.074 4.02051 41.5158 4.02051H43.9158C44.3576 4.02051 44.7158 4.37868 44.7158 4.82051V5.22051C44.7158 5.66234 44.3576 6.02051 43.9158 6.02051H41.5158C41.074 6.02051 40.7158 5.66234 40.7158 5.22051V4.82051Z" fill="url(#paint36_linear_3093_15458)"/>
+<path d="M40.7158 4.02051H44.7158H40.7158ZM44.7158 6.02051H40.7158H44.7158ZM41.5158 6.02051C40.9635 6.02051 40.5158 5.57279 40.5158 5.02051C40.5158 4.46822 40.9635 4.02051 41.5158 4.02051C41.1844 4.02051 40.9158 4.37868 40.9158 4.82051V5.22051C40.9158 5.66234 41.1844 6.02051 41.5158 6.02051ZM44.7158 4.02051V6.02051V4.02051Z" fill="#AEAEAE" mask="url(#path-60-inside-12_3093_15458)"/>
+<defs>
+<filter id="filter0_f_3093_15458" x="25" y="9.5" width="59" height="98" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_3093_15458"/>
+</filter>
+<filter id="filter1_f_3093_15458" x="32" y="9.5" width="59" height="98" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_3093_15458"/>
+</filter>
+<filter id="filter2_f_3093_15458" x="39" y="9.5" width="59" height="98" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_3093_15458"/>
+</filter>
+<filter id="filter3_f_3093_15458" x="46" y="9.5" width="59" height="98" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_3093_15458"/>
+</filter>
+<filter id="filter4_f_3093_15458" x="53" y="9.5" width="59" height="98" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_3093_15458"/>
+</filter>
+<filter id="filter5_f_3093_15458" x="60" y="9.5" width="59" height="98" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_3093_15458"/>
+</filter>
+<filter id="filter6_f_3093_15458" x="-25" y="9.5" width="59" height="98" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_3093_15458"/>
+</filter>
+<filter id="filter7_f_3093_15458" x="-18" y="9.5" width="59" height="98" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_3093_15458"/>
+</filter>
+<filter id="filter8_f_3093_15458" x="-11" y="9.5" width="59" height="98" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_3093_15458"/>
+</filter>
+<filter id="filter9_f_3093_15458" x="-4" y="9.5" width="59" height="98" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_3093_15458"/>
+</filter>
+<filter id="filter10_f_3093_15458" x="3" y="9.5" width="59" height="98" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_3093_15458"/>
+</filter>
+<filter id="filter11_f_3093_15458" x="10" y="9.5" width="59" height="98" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_3093_15458"/>
+</filter>
+<linearGradient id="paint0_linear_3093_15458" x1="4.58333" y1="3" x2="4.58333" y2="6" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="0.647419" stop-color="#FAFAFA"/>
+<stop offset="1" stop-color="#D2D2D2"/>
+</linearGradient>
+<linearGradient id="paint1_linear_3093_15458" x1="54" y1="15.0464" x2="60.7583" y2="15.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.00263339" stop-color="#F2F2F2"/>
+<stop offset="0.0416667" stop-color="#EDEDED"/>
+<stop offset="0.160826" stop-color="#E3E3E3"/>
+<stop offset="0.21442" stop-color="#D9D9D9"/>
+<stop offset="0.30133" stop-color="#C9C9C9"/>
+<stop offset="0.394033" stop-color="#CCCCCC"/>
+<stop offset="0.456318" stop-color="#CFCFCF"/>
+<stop offset="0.794648" stop-color="#EDEDED"/>
+<stop offset="0.989457" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint2_linear_3093_15458" x1="54" y1="15.0464" x2="60.7583" y2="15.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.0416667" stop-color="#F2F2F2"/>
+<stop offset="0.190295" stop-color="#E3E3E3"/>
+<stop offset="0.238545" stop-color="#D9D9D9"/>
+<stop offset="0.282637" stop-color="#CACACA"/>
+<stop offset="0.344036" stop-color="#858585"/>
+<stop offset="0.408172" stop-color="#DEDEDE"/>
+<stop offset="0.51708" stop-color="#E6E6E6"/>
+<stop offset="0.710057" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint3_linear_3093_15458" x1="55.8992" y1="3.02051" x2="55.899" y2="6.02051" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="0.647419" stop-color="#FAFAFA"/>
+<stop offset="1" stop-color="#D2D2D2"/>
+</linearGradient>
+<linearGradient id="paint4_linear_3093_15458" x1="61" y1="15.0464" x2="67.7583" y2="15.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.00263339" stop-color="#F2F2F2"/>
+<stop offset="0.0416667" stop-color="#EDEDED"/>
+<stop offset="0.160826" stop-color="#E3E3E3"/>
+<stop offset="0.21442" stop-color="#D9D9D9"/>
+<stop offset="0.30133" stop-color="#C9C9C9"/>
+<stop offset="0.394033" stop-color="#CCCCCC"/>
+<stop offset="0.456318" stop-color="#CFCFCF"/>
+<stop offset="0.794648" stop-color="#EDEDED"/>
+<stop offset="0.989457" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint5_linear_3093_15458" x1="61" y1="15.0464" x2="67.7583" y2="15.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.0416667" stop-color="#F2F2F2"/>
+<stop offset="0.190295" stop-color="#E3E3E3"/>
+<stop offset="0.238545" stop-color="#D9D9D9"/>
+<stop offset="0.282637" stop-color="#CACACA"/>
+<stop offset="0.344036" stop-color="#858585"/>
+<stop offset="0.408172" stop-color="#DEDEDE"/>
+<stop offset="0.51708" stop-color="#E6E6E6"/>
+<stop offset="0.710057" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint6_linear_3093_15458" x1="62.8992" y1="3.02051" x2="62.899" y2="6.02051" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="0.647419" stop-color="#FAFAFA"/>
+<stop offset="1" stop-color="#D2D2D2"/>
+</linearGradient>
+<linearGradient id="paint7_linear_3093_15458" x1="68" y1="15.0464" x2="74.7583" y2="15.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.00263339" stop-color="#F2F2F2"/>
+<stop offset="0.0416667" stop-color="#EDEDED"/>
+<stop offset="0.160826" stop-color="#E3E3E3"/>
+<stop offset="0.21442" stop-color="#D9D9D9"/>
+<stop offset="0.30133" stop-color="#C9C9C9"/>
+<stop offset="0.394033" stop-color="#CCCCCC"/>
+<stop offset="0.456318" stop-color="#CFCFCF"/>
+<stop offset="0.794648" stop-color="#EDEDED"/>
+<stop offset="0.989457" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint8_linear_3093_15458" x1="68" y1="15.0464" x2="74.7583" y2="15.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.0416667" stop-color="#F2F2F2"/>
+<stop offset="0.190295" stop-color="#E3E3E3"/>
+<stop offset="0.238545" stop-color="#D9D9D9"/>
+<stop offset="0.282637" stop-color="#CACACA"/>
+<stop offset="0.344036" stop-color="#858585"/>
+<stop offset="0.408172" stop-color="#DEDEDE"/>
+<stop offset="0.51708" stop-color="#E6E6E6"/>
+<stop offset="0.710057" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint9_linear_3093_15458" x1="69.8992" y1="3.02051" x2="69.899" y2="6.02051" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="0.647419" stop-color="#FAFAFA"/>
+<stop offset="1" stop-color="#D2D2D2"/>
+</linearGradient>
+<linearGradient id="paint10_linear_3093_15458" x1="75" y1="15.0464" x2="81.7583" y2="15.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.00263339" stop-color="#F2F2F2"/>
+<stop offset="0.0416667" stop-color="#EDEDED"/>
+<stop offset="0.160826" stop-color="#E3E3E3"/>
+<stop offset="0.21442" stop-color="#D9D9D9"/>
+<stop offset="0.30133" stop-color="#C9C9C9"/>
+<stop offset="0.394033" stop-color="#CCCCCC"/>
+<stop offset="0.456318" stop-color="#CFCFCF"/>
+<stop offset="0.794648" stop-color="#EDEDED"/>
+<stop offset="0.989457" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint11_linear_3093_15458" x1="75" y1="15.0464" x2="81.7583" y2="15.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.0416667" stop-color="#F2F2F2"/>
+<stop offset="0.190295" stop-color="#E3E3E3"/>
+<stop offset="0.238545" stop-color="#D9D9D9"/>
+<stop offset="0.282637" stop-color="#CACACA"/>
+<stop offset="0.344036" stop-color="#858585"/>
+<stop offset="0.408172" stop-color="#DEDEDE"/>
+<stop offset="0.51708" stop-color="#E6E6E6"/>
+<stop offset="0.710057" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint12_linear_3093_15458" x1="76.8992" y1="3.02051" x2="76.899" y2="6.02051" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="0.647419" stop-color="#FAFAFA"/>
+<stop offset="1" stop-color="#D2D2D2"/>
+</linearGradient>
+<linearGradient id="paint13_linear_3093_15458" x1="82" y1="15.0464" x2="88.7583" y2="15.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.00263339" stop-color="#F2F2F2"/>
+<stop offset="0.0416667" stop-color="#EDEDED"/>
+<stop offset="0.160826" stop-color="#E3E3E3"/>
+<stop offset="0.21442" stop-color="#D9D9D9"/>
+<stop offset="0.30133" stop-color="#C9C9C9"/>
+<stop offset="0.394033" stop-color="#CCCCCC"/>
+<stop offset="0.456318" stop-color="#CFCFCF"/>
+<stop offset="0.794648" stop-color="#EDEDED"/>
+<stop offset="0.989457" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint14_linear_3093_15458" x1="82" y1="15.0464" x2="88.7583" y2="15.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.0416667" stop-color="#F2F2F2"/>
+<stop offset="0.190295" stop-color="#E3E3E3"/>
+<stop offset="0.238545" stop-color="#D9D9D9"/>
+<stop offset="0.282637" stop-color="#CACACA"/>
+<stop offset="0.344036" stop-color="#858585"/>
+<stop offset="0.408172" stop-color="#DEDEDE"/>
+<stop offset="0.51708" stop-color="#E6E6E6"/>
+<stop offset="0.710057" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint15_linear_3093_15458" x1="83.8992" y1="3.02051" x2="83.899" y2="6.02051" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="0.647419" stop-color="#FAFAFA"/>
+<stop offset="1" stop-color="#D2D2D2"/>
+</linearGradient>
+<linearGradient id="paint16_linear_3093_15458" x1="89" y1="15.0464" x2="95.7583" y2="15.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.00263339" stop-color="#F2F2F2"/>
+<stop offset="0.0416667" stop-color="#EDEDED"/>
+<stop offset="0.160826" stop-color="#E3E3E3"/>
+<stop offset="0.21442" stop-color="#D9D9D9"/>
+<stop offset="0.30133" stop-color="#C9C9C9"/>
+<stop offset="0.394033" stop-color="#CCCCCC"/>
+<stop offset="0.456318" stop-color="#CFCFCF"/>
+<stop offset="0.794648" stop-color="#EDEDED"/>
+<stop offset="0.989457" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint17_linear_3093_15458" x1="89" y1="15.0464" x2="95.7583" y2="15.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.0416667" stop-color="#F2F2F2"/>
+<stop offset="0.190295" stop-color="#E3E3E3"/>
+<stop offset="0.238545" stop-color="#D9D9D9"/>
+<stop offset="0.282637" stop-color="#CACACA"/>
+<stop offset="0.344036" stop-color="#858585"/>
+<stop offset="0.408172" stop-color="#DEDEDE"/>
+<stop offset="0.51708" stop-color="#E6E6E6"/>
+<stop offset="0.710057" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint18_linear_3093_15458" x1="90.8992" y1="3.02051" x2="90.899" y2="6.02051" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="0.647419" stop-color="#FAFAFA"/>
+<stop offset="1" stop-color="#D2D2D2"/>
+</linearGradient>
+<linearGradient id="paint19_linear_3093_15458" x1="4" y1="15.0464" x2="10.7583" y2="15.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.00263339" stop-color="#F2F2F2"/>
+<stop offset="0.0416667" stop-color="#EDEDED"/>
+<stop offset="0.160826" stop-color="#E3E3E3"/>
+<stop offset="0.21442" stop-color="#D9D9D9"/>
+<stop offset="0.30133" stop-color="#C9C9C9"/>
+<stop offset="0.394033" stop-color="#CCCCCC"/>
+<stop offset="0.456318" stop-color="#CFCFCF"/>
+<stop offset="0.794648" stop-color="#EDEDED"/>
+<stop offset="0.989457" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint20_linear_3093_15458" x1="4" y1="15.0464" x2="10.7583" y2="15.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.0416667" stop-color="#F2F2F2"/>
+<stop offset="0.190295" stop-color="#E3E3E3"/>
+<stop offset="0.238545" stop-color="#D9D9D9"/>
+<stop offset="0.282637" stop-color="#CACACA"/>
+<stop offset="0.344036" stop-color="#858585"/>
+<stop offset="0.408172" stop-color="#DEDEDE"/>
+<stop offset="0.51708" stop-color="#E6E6E6"/>
+<stop offset="0.710057" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint21_linear_3093_15458" x1="5.89915" y1="3.02051" x2="5.89902" y2="6.02051" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="0.647419" stop-color="#FAFAFA"/>
+<stop offset="1" stop-color="#D2D2D2"/>
+</linearGradient>
+<linearGradient id="paint22_linear_3093_15458" x1="11" y1="15.0464" x2="17.7583" y2="15.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.00263339" stop-color="#F2F2F2"/>
+<stop offset="0.0416667" stop-color="#EDEDED"/>
+<stop offset="0.160826" stop-color="#E3E3E3"/>
+<stop offset="0.21442" stop-color="#D9D9D9"/>
+<stop offset="0.30133" stop-color="#C9C9C9"/>
+<stop offset="0.394033" stop-color="#CCCCCC"/>
+<stop offset="0.456318" stop-color="#CFCFCF"/>
+<stop offset="0.794648" stop-color="#EDEDED"/>
+<stop offset="0.989457" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint23_linear_3093_15458" x1="11" y1="15.0464" x2="17.7583" y2="15.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.0416667" stop-color="#F2F2F2"/>
+<stop offset="0.190295" stop-color="#E3E3E3"/>
+<stop offset="0.238545" stop-color="#D9D9D9"/>
+<stop offset="0.282637" stop-color="#CACACA"/>
+<stop offset="0.344036" stop-color="#858585"/>
+<stop offset="0.408172" stop-color="#DEDEDE"/>
+<stop offset="0.51708" stop-color="#E6E6E6"/>
+<stop offset="0.710057" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint24_linear_3093_15458" x1="12.8992" y1="3.02051" x2="12.899" y2="6.02051" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="0.647419" stop-color="#FAFAFA"/>
+<stop offset="1" stop-color="#D2D2D2"/>
+</linearGradient>
+<linearGradient id="paint25_linear_3093_15458" x1="18" y1="15.0464" x2="24.7583" y2="15.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.00263339" stop-color="#F2F2F2"/>
+<stop offset="0.0416667" stop-color="#EDEDED"/>
+<stop offset="0.160826" stop-color="#E3E3E3"/>
+<stop offset="0.21442" stop-color="#D9D9D9"/>
+<stop offset="0.30133" stop-color="#C9C9C9"/>
+<stop offset="0.394033" stop-color="#CCCCCC"/>
+<stop offset="0.456318" stop-color="#CFCFCF"/>
+<stop offset="0.794648" stop-color="#EDEDED"/>
+<stop offset="0.989457" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint26_linear_3093_15458" x1="18" y1="15.0464" x2="24.7583" y2="15.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.0416667" stop-color="#F2F2F2"/>
+<stop offset="0.190295" stop-color="#E3E3E3"/>
+<stop offset="0.238545" stop-color="#D9D9D9"/>
+<stop offset="0.282637" stop-color="#CACACA"/>
+<stop offset="0.344036" stop-color="#858585"/>
+<stop offset="0.408172" stop-color="#DEDEDE"/>
+<stop offset="0.51708" stop-color="#E6E6E6"/>
+<stop offset="0.710057" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint27_linear_3093_15458" x1="19.8992" y1="3.02051" x2="19.899" y2="6.02051" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="0.647419" stop-color="#FAFAFA"/>
+<stop offset="1" stop-color="#D2D2D2"/>
+</linearGradient>
+<linearGradient id="paint28_linear_3093_15458" x1="25" y1="15.0464" x2="31.7583" y2="15.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.00263339" stop-color="#F2F2F2"/>
+<stop offset="0.0416667" stop-color="#EDEDED"/>
+<stop offset="0.160826" stop-color="#E3E3E3"/>
+<stop offset="0.21442" stop-color="#D9D9D9"/>
+<stop offset="0.30133" stop-color="#C9C9C9"/>
+<stop offset="0.394033" stop-color="#CCCCCC"/>
+<stop offset="0.456318" stop-color="#CFCFCF"/>
+<stop offset="0.794648" stop-color="#EDEDED"/>
+<stop offset="0.989457" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint29_linear_3093_15458" x1="25" y1="15.0464" x2="31.7583" y2="15.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.0416667" stop-color="#F2F2F2"/>
+<stop offset="0.190295" stop-color="#E3E3E3"/>
+<stop offset="0.238545" stop-color="#D9D9D9"/>
+<stop offset="0.282637" stop-color="#CACACA"/>
+<stop offset="0.344036" stop-color="#858585"/>
+<stop offset="0.408172" stop-color="#DEDEDE"/>
+<stop offset="0.51708" stop-color="#E6E6E6"/>
+<stop offset="0.710057" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint30_linear_3093_15458" x1="26.8992" y1="3.02051" x2="26.899" y2="6.02051" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="0.647419" stop-color="#FAFAFA"/>
+<stop offset="1" stop-color="#D2D2D2"/>
+</linearGradient>
+<linearGradient id="paint31_linear_3093_15458" x1="32" y1="15.0464" x2="38.7583" y2="15.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.00263339" stop-color="#F2F2F2"/>
+<stop offset="0.0416667" stop-color="#EDEDED"/>
+<stop offset="0.160826" stop-color="#E3E3E3"/>
+<stop offset="0.21442" stop-color="#D9D9D9"/>
+<stop offset="0.30133" stop-color="#C9C9C9"/>
+<stop offset="0.394033" stop-color="#CCCCCC"/>
+<stop offset="0.456318" stop-color="#CFCFCF"/>
+<stop offset="0.794648" stop-color="#EDEDED"/>
+<stop offset="0.989457" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint32_linear_3093_15458" x1="32" y1="15.0464" x2="38.7583" y2="15.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.0416667" stop-color="#F2F2F2"/>
+<stop offset="0.190295" stop-color="#E3E3E3"/>
+<stop offset="0.238545" stop-color="#D9D9D9"/>
+<stop offset="0.282637" stop-color="#CACACA"/>
+<stop offset="0.344036" stop-color="#858585"/>
+<stop offset="0.408172" stop-color="#DEDEDE"/>
+<stop offset="0.51708" stop-color="#E6E6E6"/>
+<stop offset="0.710057" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint33_linear_3093_15458" x1="33.8992" y1="3.02051" x2="33.899" y2="6.02051" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="0.647419" stop-color="#FAFAFA"/>
+<stop offset="1" stop-color="#D2D2D2"/>
+</linearGradient>
+<linearGradient id="paint34_linear_3093_15458" x1="39" y1="15.0464" x2="45.7583" y2="15.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.00263339" stop-color="#F2F2F2"/>
+<stop offset="0.0416667" stop-color="#EDEDED"/>
+<stop offset="0.160826" stop-color="#E3E3E3"/>
+<stop offset="0.21442" stop-color="#D9D9D9"/>
+<stop offset="0.30133" stop-color="#C9C9C9"/>
+<stop offset="0.394033" stop-color="#CCCCCC"/>
+<stop offset="0.456318" stop-color="#CFCFCF"/>
+<stop offset="0.794648" stop-color="#EDEDED"/>
+<stop offset="0.989457" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint35_linear_3093_15458" x1="39" y1="15.0464" x2="45.7583" y2="15.0464" gradientUnits="userSpaceOnUse">
+<stop offset="0.0416667" stop-color="#F2F2F2"/>
+<stop offset="0.190295" stop-color="#E3E3E3"/>
+<stop offset="0.238545" stop-color="#D9D9D9"/>
+<stop offset="0.282637" stop-color="#CACACA"/>
+<stop offset="0.344036" stop-color="#858585"/>
+<stop offset="0.408172" stop-color="#DEDEDE"/>
+<stop offset="0.51708" stop-color="#E6E6E6"/>
+<stop offset="0.710057" stop-color="#F2F2F2"/>
+</linearGradient>
+<linearGradient id="paint36_linear_3093_15458" x1="40.8992" y1="3.02051" x2="40.899" y2="6.02051" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="0.647419" stop-color="#FAFAFA"/>
+<stop offset="1" stop-color="#D2D2D2"/>
+</linearGradient>
+</defs>
+</svg>

BIN
public/images/page-officehome/curtain_open.png


+ 0 - 14
public/images/page-officehome/curtain_open.svg

@@ -1,14 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<rect x="0.75" y="0.75" width="16.5" height="3" stroke="#C4C4C4" stroke-width="1.5"/>
-<path d="M0.75 3.75003C0.75 3.75003 4.875 3.75 5.25 3.75003C5.625 4.87503 4.875 9 3 9.75003C3 10.875 3 17.25 3 17.25H0.75V3.75003Z" stroke="#C4C4C4" stroke-width="1.5"/>
-<path d="M17.3438 3.75003C17.3438 3.75003 13.2188 3.75 12.8438 3.75003C12.4688 4.87503 13.2188 9 15.0938 9.75003C15.0938 10.875 15.0938 17.25 15.0938 17.25H17.3438V3.75003Z" stroke="#C4C4C4" stroke-width="1.5"/>
-<line x1="0.75" y1="9.75" x2="3" y2="9.75" stroke="#C4C4C4" stroke-width="1.5"/>
-<line x1="15" y1="9.75" x2="17.25" y2="9.75" stroke="#C4C4C4" stroke-width="1.5"/>
-</g>
-<defs>
-<clipPath id="clip0">
-<rect width="18" height="18" fill="white"/>
-</clipPath>
-</defs>
-</svg>

Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 5 - 0
public/images/page-officehome/curtain_opening.svg


+ 12 - 0
public/images/page-officehome/curtain_right.svg

@@ -0,0 +1,12 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="20" fill="#F1F4F6"/>
+<g clip-path="url(#clip0_2414_59132)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.2353 15.9023C23.4956 15.6419 23.9177 15.6419 24.1781 15.9023L27.6669 19.3911C28.1876 19.9118 28.1876 20.756 27.6669 21.2767L24.1781 24.7655C23.9177 25.0259 23.4956 25.0259 23.2353 24.7655C22.9749 24.5052 22.9749 24.0831 23.2353 23.8227L26.7241 20.3339L23.2353 16.8451C22.9749 16.5848 22.9749 16.1626 23.2353 15.9023Z" fill="#626C78"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9912 16.0488C16.7308 15.7884 16.3087 15.7884 16.0483 16.0488L12.706 19.3912C12.1853 19.9119 12.1853 20.7561 12.706 21.2768L16.0483 24.6192C16.3087 24.8795 16.7308 24.8795 16.9912 24.6192C17.2515 24.3588 17.2515 23.9367 16.9912 23.6764L13.6488 20.334L16.9912 16.9916C17.2515 16.7312 17.2515 16.3091 16.9912 16.0488Z" fill="#626C78"/>
+</g>
+<defs>
+<clipPath id="clip0_2414_59132">
+<rect width="16" height="16" fill="white" transform="translate(12 12)"/>
+</clipPath>
+</defs>
+</svg>

+ 175 - 0
public/images/page-officehome/curtain_roll.svg

@@ -0,0 +1,175 @@
+<svg width="65" height="69" viewBox="0 0 65 69" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="0.5" width="63" height="5" fill="url(#paint0_linear_3131_19096)"/>
+<rect x="64" width="1" height="6" fill="url(#paint1_linear_3131_19096)"/>
+<rect width="1" height="6" fill="url(#paint2_linear_3131_19096)"/>
+<rect width="61" height="3" transform="translate(2 5.5)" fill="url(#paint3_linear_3131_19096)"/>
+<rect width="61" height="3" transform="translate(2 8.5)" fill="url(#paint4_linear_3131_19096)"/>
+<rect width="61" height="3" transform="translate(2 11.5)" fill="url(#paint5_linear_3131_19096)"/>
+<rect width="61" height="3" transform="translate(2 14.5)" fill="url(#paint6_linear_3131_19096)"/>
+<rect width="61" height="3" transform="translate(2 17.5)" fill="url(#paint7_linear_3131_19096)"/>
+<rect width="61" height="3" transform="translate(2 20.5)" fill="url(#paint8_linear_3131_19096)"/>
+<rect width="61" height="3" transform="translate(2 23.5)" fill="url(#paint9_linear_3131_19096)"/>
+<rect width="61" height="3" transform="translate(2 26.5)" fill="url(#paint10_linear_3131_19096)"/>
+<rect width="61" height="3" transform="translate(2 29.5)" fill="url(#paint11_linear_3131_19096)"/>
+<rect width="61" height="3" transform="translate(2 32.5)" fill="url(#paint12_linear_3131_19096)"/>
+<rect width="61" height="3" transform="translate(2 35.5)" fill="url(#paint13_linear_3131_19096)"/>
+<rect width="61" height="3" transform="translate(2 38.5)" fill="url(#paint14_linear_3131_19096)"/>
+<rect width="61" height="3" transform="translate(2 41.5)" fill="url(#paint15_linear_3131_19096)"/>
+<rect width="61" height="3" transform="translate(2 44.5)" fill="url(#paint16_linear_3131_19096)"/>
+<rect width="61" height="3" transform="translate(2 47.5)" fill="url(#paint17_linear_3131_19096)"/>
+<rect width="61" height="3" transform="translate(2 50.5)" fill="url(#paint18_linear_3131_19096)"/>
+<rect width="61" height="3" transform="translate(2 53.5)" fill="url(#paint19_linear_3131_19096)"/>
+<rect width="61" height="3" transform="translate(2 56.5)" fill="url(#paint20_linear_3131_19096)"/>
+<rect width="61" height="3" transform="translate(2 59.5)" fill="url(#paint21_linear_3131_19096)"/>
+<rect width="61" height="3" transform="translate(2 62.5)" fill="url(#paint22_linear_3131_19096)"/>
+<rect width="61" height="3" transform="translate(2 65.5)" fill="url(#paint23_linear_3131_19096)"/>
+<g filter="url(#filter0_d_3131_19096)">
+<rect x="9" y="5.5" width="0.6" height="63" fill="white"/>
+</g>
+<g filter="url(#filter1_d_3131_19096)">
+<rect x="54" y="5.5" width="0.6" height="63" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_3131_19096" x="9" y="5" width="1.6001" height="64" 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 dx="0.5"/>
+<feGaussianBlur stdDeviation="0.25"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3131_19096"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3131_19096" result="shape"/>
+</filter>
+<filter id="filter1_d_3131_19096" x="54" y="5" width="1.6001" height="64" 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 dx="0.5"/>
+<feGaussianBlur stdDeviation="0.25"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3131_19096"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3131_19096" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_3131_19096" x1="32.5" y1="0.5" x2="32.5" y2="5.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F0F0F0"/>
+<stop offset="0.238869" stop-color="#FAFAFA"/>
+<stop offset="0.514935" stop-color="#EAEAEA"/>
+<stop offset="1" stop-color="#D6D4D3"/>
+</linearGradient>
+<linearGradient id="paint1_linear_3131_19096" x1="64" y1="1.71429" x2="65" y2="1.71429" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F3F3F3"/>
+<stop offset="0.57965" stop-color="#EAE9E9"/>
+<stop offset="1" stop-color="#D6D4D3"/>
+</linearGradient>
+<linearGradient id="paint2_linear_3131_19096" x1="0" y1="1.71429" x2="1" y2="1.71429" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F3F3F3"/>
+<stop offset="0.57965" stop-color="#EAE9E9"/>
+<stop offset="1" stop-color="#D6D4D3"/>
+</linearGradient>
+<linearGradient id="paint3_linear_3131_19096" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint4_linear_3131_19096" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint5_linear_3131_19096" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint6_linear_3131_19096" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint7_linear_3131_19096" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint8_linear_3131_19096" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint9_linear_3131_19096" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint10_linear_3131_19096" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint11_linear_3131_19096" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint12_linear_3131_19096" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint13_linear_3131_19096" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint14_linear_3131_19096" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint15_linear_3131_19096" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint16_linear_3131_19096" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint17_linear_3131_19096" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint18_linear_3131_19096" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint19_linear_3131_19096" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint20_linear_3131_19096" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint21_linear_3131_19096" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint22_linear_3131_19096" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+<linearGradient id="paint23_linear_3131_19096" x1="30.5" y1="0" x2="30.5" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F1F1"/>
+<stop offset="0.494792" stop-color="#F1F1F1"/>
+<stop offset="1" stop-color="#DFDFDF"/>
+</linearGradient>
+</defs>
+</svg>

+ 5 - 0
public/images/page-officehome/curtain_stop.svg

@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="20" fill="#F1F4F6"/>
+<rect x="15.3335" y="14.667" width="1.33333" height="10.6667" rx="0.666667" fill="#626C78"/>
+<rect x="23.333" y="14.667" width="1.33333" height="10.6667" rx="0.666667" fill="#626C78"/>
+</svg>

+ 5 - 0
public/images/page-officehome/curtain_up.svg

@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="20" fill="#F1F4F6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.8051 20.4711C26.0655 20.2107 26.0655 19.7886 25.8051 19.5283L20.8363 14.5595C20.3156 14.0388 19.4714 14.0388 18.9507 14.5595L13.9819 19.5283C13.7215 19.7886 13.7215 20.2107 13.9819 20.4711C14.2422 20.7314 14.6643 20.7314 14.9247 20.4711L19.8935 15.5023L24.8623 20.4711C25.1226 20.7314 25.5448 20.7314 25.8051 20.4711Z" fill="#626C78"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.8316 15.3334C19.4634 15.3334 19.165 15.6319 19.165 16.0001V25.7641C19.165 26.1323 19.4634 26.4308 19.8316 26.4308C20.1998 26.4308 20.4983 26.1323 20.4983 25.7641V16.0001C20.4983 15.6319 20.1998 15.3334 19.8316 15.3334Z" fill="#626C78"/>
+</svg>

+ 322 - 294
src/views/envmonitor/components/Curtain/index.vue

@@ -3,79 +3,125 @@
     <div class="curtain-top">
       <div class="curtain-desc">
         <p class="curtain-title">
-          {{ curtainData.length && curtainData.length == 1 ? curtainData[0].name : '窗帘' }}
+          {{
+            curtainData.length && curtainData.length == 1
+              ? curtainData[0].name
+              : "窗帘"
+          }}
         </p>
-        <p class="curtain-status">
-          <!--          窗帘已打开-->
-          <span class="curtain-tip">{{ countText }}</span>
-        </p>
-        <div class="show-all" @click="showAll" v-if="isShowChildLight">
-          <van-icon
-            :name="lightIcon"
-            class="curtain-icon"
-          />
-          <span>显示全部</span>
-        </div>
       </div>
       <div class="curtain-right">
         <img
-          :src="parseImgUrl('page-officehome','curtain-img.svg')"
+          v-if="
+            curtainData[0].equipmentType == 4 ||
+            curtainData[0].equipmentType == 5
+          "
+          :src="parseImgUrl('page-officehome', 'curtain_roll.svg')"
           alt=""
-        >
-        <div class="curtain-control" v-if="!showFlag">
-          <div class="control-item mr10"
-               @click="handleTotal('EquipOffSet')"
-               :class="{'box-active':curtainClose && count,'control-item-disabled':!userIsControl}"
-          >
-            <span class="timer-text" v-if="curtainClose && count">{{ count }}</span>
-            <img
-              v-else
-              :src="parseImgUrl('page-officehome','curtain-close.png')"
-              alt=""
-            >
-          </div>
-          <div class="control-item"
-               @click="handleTotal('EquipOnSet')"
-               :class="{'box-active':curtainOpen && count,'control-item-disabled':!userIsControl}"
-          >
-            <span class="timer-text" v-if="curtainOpen && count">{{ count }}</span>
-            <img
-              v-else
-              :src="parseImgUrl('page-officehome','curtain-open.png')"
-              alt=""
-            >
-          </div>
-        </div>
+        />
+        <img
+          v-else
+          :src="parseImgUrl('page-officehome', 'curtain_new.svg')"
+          alt=""
+        />
       </div>
     </div>
-    <!--窗帘按钮-->
-    <div class="child-curtain" v-if="showFlag"
-         :key="item.id"
-         v-for="(item,index) in curtainData"
-    >
-      <div class="child-title">{{ item.name }}</div>
-      <div class="curtain-control">
-        <div class="control-item mr10"
-             @click="handleChild('EquipOffSet',item.id,index)"
-             :class="{'box-active':item.curtainClose  && count,'control-item-disabled':!userIsControl}"
+    <div class="curtain-box">
+      <div class="top-nav">
+        <span
+          :class="type == 'all' ? 'nav-active' : ''"
+          @click="checkNav('all')"
         >
-          <span class="timer-text" v-if="item.curtainClose && count">{{ count }}</span>
+          总控制
+        </span>
+        <span
+          :class="type == 'child' ? 'nav-active' : ''"
+          @click="checkNav('child')"
+        >
+          子设备
+        </span>
+      </div>
+    </div>
+    <template v-if="type == 'all'">
+      <div class="line"></div>
+      <div class="top-control">
+        <img
+          :src="parseImgUrl('page-officehome', 'curtain_opening.svg')"
+          alt=""
+        />
+
+        <!--左边-->
+        <img
+          v-if="
+            curtainData[0].equipmentType == 4 ||
+            curtainData[0].equipmentType == 5
+          "
+          :src="parseImgUrl('page-officehome', 'curtain_left.svg')"
+          alt=""
+        />
+        <img
+          v-else
+          :src="parseImgUrl('page-officehome', 'curtain_down.svg')"
+          alt=""
+        />
+
+        <!--暂停-->
+        <img :src="parseImgUrl('page-officehome', 'curtain_stop.svg')" alt="" />
+
+        <!--右边-->
+        <img
+          v-if="
+            curtainData[0].equipmentType == 4 ||
+            curtainData[0].equipmentType == 5
+          "
+          :src="parseImgUrl('page-officehome', 'curtain_right.svg')"
+          alt=""
+        />
+        <img
+          v-else
+          :src="parseImgUrl('page-officehome', 'curtain_up.svg')"
+          alt=""
+        />
+      </div>
+    </template>
+
+    <div class="curtain-child" v-if="type == 'child'">
+      <div class="child-item" :key="item.id" v-for="item in curtainData">
+        <div class="curtain-name">
+          <div class="name">{{ item.name }}</div>
+          <span>开度90%</span>
+        </div>
+        <div class="curtain-control">
+          <!--左边-->
+          <img
+            v-if="item.equipmentType == 4 || item.equipmentType == 5"
+            :src="parseImgUrl('page-officehome', 'curtain_left.svg')"
+            alt=""
+          />
           <img
             v-else
-            :src="parseImgUrl('page-officehome','curtain-close.png')"
+            :src="parseImgUrl('page-officehome', 'curtain_down.svg')"
             alt=""
-          >
-        </div>
-        <div class="control-item"
-             @click="handleChild('EquipOnSet',item.id,index)"
-             :class="{'box-active':item.curtainOpen  && count,'control-item-disabled':!userIsControl}"
-        >
-          <span class="timer-text" v-if="item.curtainOpen && count">{{ count }}</span>
+          />
+
+          <!--暂停-->
+          <img
+            :src="parseImgUrl('page-officehome', 'curtain_stop.svg')"
+            alt=""
+          />
+
+          <!-- {{ item }} -->
+          <!--右边-->
+          <img
+            v-if="item.equipmentType == 4 || item.equipmentType == 5"
+            :src="parseImgUrl('page-officehome', 'curtain_right.svg')"
+            alt=""
+          />
           <img
             v-else
-            :src="parseImgUrl('page-officehome','curtain-open.png')"
+            :src="parseImgUrl('page-officehome', 'curtain_up.svg')"
             alt=""
-          >
+          />
         </div>
       </div>
     </div>
@@ -83,369 +129,351 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, reactive, toRefs, watch } from 'vue'
-import { getObjectDataEqpGroupHttp, setEquipeHttp } from '@/apis/envmonitor'
-import { parseImgUrl } from '@/utils'
-import { Toast } from 'vant'
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  reactive,
+  toRefs,
+  watch,
+} from "vue";
+import { getObjectDataEqpGroupHttp, setEquipeHttp } from "@/apis/envmonitor";
+import { parseImgUrl } from "@/utils";
+import { Toast } from "vant";
 
 export default defineComponent({
   props: {
     projectId: {
       type: String,
-      default: () => ''
+      default: () => "",
     },
     spaceId: {
       type: String,
-      default: () => ''
+      default: () => "",
     },
     userIsControl: {
       type: Boolean,
-      default: () => false
-    }
+      default: () => false,
+    },
   },
   setup(props) {
-    let curtainData: any = []
-    let timer: any = null
-    let projectId: any = props.projectId
+    let curtainData: any = [];
+    let timer: any = null;
+    let projectId: any = props.projectId;
+    let type: any = "all";
     const proxyData = reactive({
       curtainData: curtainData,
       userIsControl: props.userIsControl,
-      lightIcon: 'arrow-down',
-      showFlag: false,
+      lightIcon: "arrow-down",
       projectId: projectId,
-      countText: '',  // 到记时文案
-      count: 0,      // 到记时
+      type: type,
+      countText: "", // 到记时文案
+      count: 0, // 到记时
       curtainOpen: false,
       curtainClose: false,
       parseImgUrl: parseImgUrl,
       timer: timer,
+      // 导航切换
+      checkNav(type: any) {
+        proxyData.type = type;
+        console.log("proxyData.type==", proxyData.type);
+      },
       // 获取窗帘列表
       getEqpGroup() {
         const params: any = {
           criteria: {
             projectId: props.projectId,
-            spaceId: props.spaceId,   // 空间ID
-            type: 0      // 0.窗帘
+            spaceId: props.spaceId, // 空间ID
+            type: 0, // 0.窗帘
           },
           orders: [
             {
-              column: 'sortNum',
-              asc: true
-            }
-          ]
-        }
-        getObjectDataEqpGroupHttp(params).then(res => {
-          const resData: any = res
-          proxyData.curtainData = resData.count ? resData.content : []
+              column: "sortNum",
+              asc: true,
+            },
+          ],
+        };
+        getObjectDataEqpGroupHttp(params).then((res) => {
+          const resData: any = res;
+          proxyData.curtainData = resData.count ? resData.content : [];
           for (let i = 0; i < proxyData.curtainData.length; i++) {
-            let item = proxyData.curtainData[i]
-            item.childDownFlag = false
-            item.childUpFlag = false
-            item.childCount = 2
-            item.childCountText = ''
+            let item = proxyData.curtainData[i];
+            item.childDownFlag = false;
+            item.childUpFlag = false;
+            item.childCount = 2;
+            item.childCountText = "";
+            curtainData[0].isOpenSet = 1;
+            curtainData[0].isStop = 1;
+            curtainData[0].openValue = 20;
+            curtainData[1].isOpenSet = 0;
+            curtainData[0].equipmentType = 1;
+            curtainData[1].equipmentType = 5;
           }
-        })
-      },
-      // 点击展示所有的登录
-      showAll() {
-        proxyData.showFlag = !proxyData.showFlag
-        if (proxyData.showFlag) {
-          proxyData.lightIcon = 'arrow-up'
-        } else {
-          proxyData.lightIcon = 'arrow-down'
-        }
+        });
       },
       checkCount() {
         if (proxyData.count > 0) {
-          return true
+          return true;
         } else {
-          return false
+          return false;
         }
       },
       // 窗帘总开关
       handleTotal(setType: string) {
         if (proxyData.userIsControl) {
-          let flag = proxyData.checkCount()
+          let flag = proxyData.checkCount();
           /**
            * flag:true 代表指令正在发送中,false:代表当前没有指令在发送
            */
-          if (!flag) {  // 只要有一条指令在发送中,要求其它指令不能再发送
-            proxyData.changeStatus(setType)
-            let arr = JSON.parse(JSON.stringify(proxyData.curtainData))  // 窗帘数据
-            let paramsArr = proxyData.setParams(arr, setType)
+          if (!flag) {
+            // 只要有一条指令在发送中,要求其它指令不能再发送
+            proxyData.changeStatus(setType);
+            let arr = JSON.parse(JSON.stringify(proxyData.curtainData)); // 窗帘数据
+            let paramsArr = proxyData.setParams(arr, setType);
             // 更新窗帘的按钮可点击状态
-            proxyData.setSwitchStatus(setType)
+            proxyData.setSwitchStatus(setType);
             // 发送窗帘指令
-            setEquipeHttp(paramsArr).then(res => {
-            })
+            setEquipeHttp(paramsArr).then((res) => {});
           }
         } else {
-          Toast('您没有当前空间的控制权限!')
+          Toast("您没有当前空间的控制权限!");
         }
       },
       handleChild(setType: string, id: any, index: any) {
         if (proxyData.userIsControl) {
-          let flag = proxyData.checkCount()
+          let flag = proxyData.checkCount();
           /**
            * flag:true 代表指令正在发送中,false:代表当前没有指令在发送
            */
-          if (!flag) {  // 只要有一条指令在发送中,要求其它指令不能再发送
-            let childItem: any = proxyData.curtainData[index]
+          if (!flag) {
+            // 只要有一条指令在发送中,要求其它指令不能再发送
+            let childItem: any = proxyData.curtainData[index];
             const params = {
               projectId: proxyData.projectId,
-              objectId: id,                // 设备ID/窗帘组ID
-              equipmentCategory: 'CFSSES',  // 设备编码 窗帘:CFSSES
-              infoCode: setType,  // 窗帘开设定:EquipOnSet 窗帘关设定:EquipOffSet
-              value: 1                // 窗帘 1 移动/停止
-            }
-            let paramsArr = []
-            paramsArr.push(params)
+              objectId: id, // 设备ID/窗帘组ID
+              equipmentCategory: "CFSSES", // 设备编码 窗帘:CFSSES
+              infoCode: setType, // 窗帘开设定:EquipOnSet 窗帘关设定:EquipOffSet
+              value: 1, // 窗帘 1 移动/停止
+            };
+            let paramsArr = [];
+            paramsArr.push(params);
             // 更新窗帘的按钮可点击状态
-            proxyData.changeStatus(setType, childItem)
-            proxyData.setSwitchStatus(setType, childItem)
+            proxyData.changeStatus(setType, childItem);
+            proxyData.setSwitchStatus(setType, childItem);
             // 发送窗帘指令
-            setEquipeHttp(paramsArr).then(res => {
-            })
+            setEquipeHttp(paramsArr).then((res) => {});
           }
         } else {
-          Toast('您没有当前空间的控制权限!')
+          Toast("您没有当前空间的控制权限!");
         }
       },
       clearCurtain() {
         proxyData.curtainData.map((item: any) => {
-          item.curtainClose = false
-          item.curtainOpen = false
-          proxyData.curtainClose = false
-          proxyData.curtainOpen = false
-        })
+          item.curtainClose = false;
+          item.curtainOpen = false;
+          proxyData.curtainClose = false;
+          proxyData.curtainOpen = false;
+        });
       },
       changeStatus(setType: any, item: any = null) {
-        proxyData.clearCurtain()
-        if (setType === 'EquipOffSet') {
+        proxyData.clearCurtain();
+        if (setType === "EquipOffSet") {
           if (item) {
-            item.curtainClose = true
+            item.curtainClose = true;
           } else {
-            proxyData.curtainClose = true
+            proxyData.curtainClose = true;
           }
         } else {
           if (item) {
-            item.curtainOpen = true
+            item.curtainOpen = true;
           } else {
-            proxyData.curtainOpen = true
+            proxyData.curtainOpen = true;
           }
         }
       },
       // 窗帘状态数据
       setSwitchStatus(setType: any, item: any = null) {
-        proxyData.count = 2  // 恢复count
-        proxyData.countText = '指令下发中'
+        proxyData.count = 2; // 恢复count
+        proxyData.countText = "指令下发中";
         proxyData.timer = setInterval(() => {
           if (proxyData.count === 0) {
-            proxyData.countText = ''
-            clearInterval(proxyData.timer)
-            proxyData.clearCurtain()
+            proxyData.countText = "";
+            clearInterval(proxyData.timer);
+            proxyData.clearCurtain();
           }
           if (proxyData.count === 1) {
-            proxyData.countText = '再次点击停止窗帘'
+            proxyData.countText = "再次点击停止窗帘";
           }
           if (proxyData.count > 0) {
-            proxyData.count--
+            proxyData.count--;
           } else {
-            proxyData.count = 0
+            proxyData.count = 0;
           }
-        }, 1000)
+        }, 1000);
       },
       // 设置发送给后台的窗帘数据
       setParams(arr: any, setType: any) {
-        let paramsArr = []
+        let paramsArr = [];
         for (let i = 0; i < arr.length; i++) {
           let obj = {
-            objectId: arr[i].id,                // 设备ID/窗帘组ID
-            equipmentCategory: 'CFSSES',  // 设备编码 窗帘:CFSSES
-            infoCode: setType,  // 窗帘开设定:EquipOnSet 窗帘关设定:EquipOffSet
-            value: 1
-          }
-          paramsArr.push(obj)
+            objectId: arr[i].id, // 设备ID/窗帘组ID
+            equipmentCategory: "CFSSES", // 设备编码 窗帘:CFSSES
+            infoCode: setType, // 窗帘开设定:EquipOnSet 窗帘关设定:EquipOffSet
+            value: 1,
+          };
+          paramsArr.push(obj);
         }
-        return paramsArr
-      }
-    })
+        return paramsArr;
+      },
+    });
     const isShowChildLight = computed(() => {
-      return proxyData.curtainData.length && proxyData.curtainData.length > 1
-    })
-    watch(
-      props,
-      (newProps: any) => {
-        if (newProps.spaceId) {
-          // 当前空间的控制权限
-          proxyData.getEqpGroup()
-          proxyData.userIsControl = newProps.userIsControl
-        }
+      return proxyData.curtainData.length && proxyData.curtainData.length > 1;
+    });
+    watch(props, (newProps: any) => {
+      if (newProps.spaceId) {
+        // 当前空间的控制权限
+        proxyData.getEqpGroup();
+        proxyData.userIsControl = newProps.userIsControl;
       }
-    )
+    });
     onMounted(() => {
       // 获取空调信息
-      proxyData.getEqpGroup()
-    })
+      proxyData.getEqpGroup();
+    });
     return {
       isShowChildLight,
-      ...toRefs(proxyData)
-    }
-  }
-})
+      ...toRefs(proxyData),
+    };
+  },
+});
 </script>
 <style lang="scss" scoped>
 .curtain {
   width: 100%;
-  padding-top: 10px;
-  padding-right: 10px;
-  background: #FFFFFF;
+  padding-top: 17px;
+  padding-bottom: 16px;
+  background: #ffffff;
   box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
   border-radius: 25px;
   margin: 15px 0px;
 }
 
 .curtain-top {
+  padding-right: 20px;
   padding-left: 20px;
-  min-height: 130px;
-  //padding-bottom: 30px;
   display: flex;
   justify-content: space-between;
-}
+  padding-bottom: 20px;
+  .curtain-desc {
+    .curtain-title {
+      padding-top: 7px;
+      font-family: "PingFang SC";
+      font-style: normal;
+      font-weight: 600;
+      font-size: 16px;
+      line-height: 22px;
 
-.curtain-desc {
-  flex: 1 98px;
-  padding-top: 10px;
-  font-family: PingFang SC;
-  font-size: 16px;
-  line-height: 19px;
-  color: #4D5262;
-  flex: none;
-  order: 0;
-  flex-grow: 0;
-  margin: 5px 0px;
-}
-
-.curtain-right {
-  position: relative;
-  width: 110px;
-  text-align: center;
+      /* TUI/Subtitle */
 
-  img {
-    width: 92px;
-    height: 69px;
+      color: #4d5262;
+    }
   }
 
-  .curtain-control {
-    position: absolute;
-    right: 10px;
-    bottom: 0px;
-  }
-}
-
-.curtain-title {
-  font-family: PingFang SC;
-  padding-left: 5px;
-  font-size: 16px;
-  line-height: 19px;
-  color: #4D5262;
-  flex: none;
-  order: 0;
-  flex-grow: 0;
-  margin: 5px 0px;
-}
-
-.curtain-status {
-  font-family: PingFang SC;
-  padding-left: 5px;
-  font-size: 14px;
-  line-height: 16px;
-  color: #C4C4C4;
-  flex: none;
-  order: 1;
-  flex-grow: 0;
-  margin: 10px 0px;
+  .curtain-right {
+    position: relative;
+    width: 100px;
+    text-align: center;
+    margin-right: 33px;
 
-  .curtain-tip {
-    display: block;
-    padding-top: 20px;
+    img {
+      width: 100px;
+      height: 62px;
+    }
   }
 }
 
-.show-all {
-  font-family: PingFang SC;
-  //display: none;
-  .curtain-icon {
-    font-size: 12px;
-    padding-right: 10px;
+.curtain-box {
+  display: flex;
+  justify-content: space-between;
+  padding: 0px 20px;
+  padding-bottom: 25px;
+  padding-top: 10px;
+  .top-nav {
+    height: 28px;
+    line-height: 28px;
+    border-radius: 21px;
+    background: #f1f4f6;
+    span {
+      box-sizing: border-box;
+      display: inline-block;
+      font-family: "PingFang SC";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 28px;
+      padding: 0 8px;
+      color: #424c59;
+    }
+    .nav-active {
+      background: #fff;
+      border: 1px solid #e1e5eb;
+      border-radius: 21px;
+    }
   }
+}
 
-  padding-top: 28px;
-  padding-bottom: 22px;
-  font-size: 14px;
-  line-height: 16px;
-  color: #c4c4c4;
-  margin: 0px 5px;
+.line {
+  border-top: 1px solid #e8ecf0;
+  // margin-bottom: 16px;
 }
 
-.curtain-control {
+.top-control {
   text-align: right;
-  padding-bottom: 15px;
-  width: 100px;
-  padding-top: 5px;
-  //padding-right: 10px;
-
-  .control-item {
+  padding: 16px 20px;
+  padding-bottom: 0;
+  img {
     width: 40px;
-    display: inline-block;
     height: 40px;
-    text-align: center;
-    border-radius: 50%;
-    background: rgba(196, 196, 196, 0.2);
-
-
-    img {
-      margin-top: 10px;
-      width: 19px;
-      height: 19px;
-    }
-  }
-
-  .control-item-disabled {
-    opacity: 0.3;
-  }
-
-  .timer-text {
-    width: 40px;
-    display: inline-block;
-    line-height: 40px;
-    font-size: 18px;
-    color: #fff;
-    margin: 0;
-    text-align: center;
+    margin-left: 8px;
   }
 }
 
-.child-curtain {
-  display: flex;
-  justify-content: space-between;
-  padding: 10px 15px 0px 28px;
-  border-top: 1px solid rgba(196, 196, 196, 0.4);
-
-  .child-title {
-    flex: 1 110px;
-    font-weight: 500;
-    font-family: PingFang SC;
-    font-size: 16px;
-    height: 40px;
-    line-height: 40px;
-    color: #4D5262;
-  }
-
-  .curtain-control {
-    text-align: right;
-    padding-right: 0;
+.curtain-child {
+  .child-item {
+    display: flex;
+    justify-content: space-between;
+    padding-top: 16px;
+    padding-bottom: 16px;
+    padding-left: 20px;
+    padding-right: 20px;
+    border-top: 1px solid #e8ecf0;
+    .curtain-control {
+      img {
+        width: 40px;
+        height: 40px;
+        margin-left: 8px;
+      }
+    }
+    .curtain-name {
+      .name {
+        font-family: "PingFang SC";
+        font-style: normal;
+        font-weight: 600;
+        font-size: 16px;
+        line-height: 22px;
+        color: #4d5262;
+      }
+      span {
+        display: block;
+        padding-top: 4px;
+        font-family: "PingFang SC";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 20px;
+        color: #c4c4c4;
+      }
+    }
   }
 }
-
 </style>

+ 451 - 0
src/views/envmonitor/components/CurtainCopy/index.vue

@@ -0,0 +1,451 @@
+<template>
+  <div class="curtain" v-if="curtainData && curtainData.length">
+    <div class="curtain-top">
+      <div class="curtain-desc">
+        <p class="curtain-title">
+          {{ curtainData.length && curtainData.length == 1 ? curtainData[0].name : '窗帘' }}
+        </p>
+        <p class="curtain-status">
+          <!--          窗帘已打开-->
+          <span class="curtain-tip">{{ countText }}</span>
+        </p>
+        <div class="show-all" @click="showAll" v-if="isShowChildLight">
+          <van-icon
+            :name="lightIcon"
+            class="curtain-icon"
+          />
+          <span>显示全部</span>
+        </div>
+      </div>
+      <div class="curtain-right">
+        <img
+          :src="parseImgUrl('page-officehome','curtain-img.svg')"
+          alt=""
+        >
+        <div class="curtain-control" v-if="!showFlag">
+          <div class="control-item mr10"
+               @click="handleTotal('EquipOffSet')"
+               :class="{'box-active':curtainClose && count,'control-item-disabled':!userIsControl}"
+          >
+            <span class="timer-text" v-if="curtainClose && count">{{ count }}</span>
+            <img
+              v-else
+              :src="parseImgUrl('page-officehome','curtain-close.png')"
+              alt=""
+            >
+          </div>
+          <div class="control-item"
+               @click="handleTotal('EquipOnSet')"
+               :class="{'box-active':curtainOpen && count,'control-item-disabled':!userIsControl}"
+          >
+            <span class="timer-text" v-if="curtainOpen && count">{{ count }}</span>
+            <img
+              v-else
+              :src="parseImgUrl('page-officehome','curtain-open.png')"
+              alt=""
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--窗帘按钮-->
+    <div class="child-curtain" v-if="showFlag"
+         :key="item.id"
+         v-for="(item,index) in curtainData"
+    >
+      <div class="child-title">{{ item.name }}</div>
+      <div class="curtain-control">
+        <div class="control-item mr10"
+             @click="handleChild('EquipOffSet',item.id,index)"
+             :class="{'box-active':item.curtainClose  && count,'control-item-disabled':!userIsControl}"
+        >
+          <span class="timer-text" v-if="item.curtainClose && count">{{ count }}</span>
+          <img
+            v-else
+            :src="parseImgUrl('page-officehome','curtain-close.png')"
+            alt=""
+          >
+        </div>
+        <div class="control-item"
+             @click="handleChild('EquipOnSet',item.id,index)"
+             :class="{'box-active':item.curtainOpen  && count,'control-item-disabled':!userIsControl}"
+        >
+          <span class="timer-text" v-if="item.curtainOpen && count">{{ count }}</span>
+          <img
+            v-else
+            :src="parseImgUrl('page-officehome','curtain-open.png')"
+            alt=""
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onMounted, reactive, toRefs, watch } from 'vue'
+import { getObjectDataEqpGroupHttp, setEquipeHttp } from '@/apis/envmonitor'
+import { parseImgUrl } from '@/utils'
+import { Toast } from 'vant'
+
+export default defineComponent({
+  props: {
+    projectId: {
+      type: String,
+      default: () => ''
+    },
+    spaceId: {
+      type: String,
+      default: () => ''
+    },
+    userIsControl: {
+      type: Boolean,
+      default: () => false
+    }
+  },
+  setup(props) {
+    let curtainData: any = []
+    let timer: any = null
+    let projectId: any = props.projectId
+    const proxyData = reactive({
+      curtainData: curtainData,
+      userIsControl: props.userIsControl,
+      lightIcon: 'arrow-down',
+      showFlag: false,
+      projectId: projectId,
+      countText: '',  // 到记时文案
+      count: 0,      // 到记时
+      curtainOpen: false,
+      curtainClose: false,
+      parseImgUrl: parseImgUrl,
+      timer: timer,
+      // 获取窗帘列表
+      getEqpGroup() {
+        const params: any = {
+          criteria: {
+            projectId: props.projectId,
+            spaceId: props.spaceId,   // 空间ID
+            type: 0      // 0.窗帘
+          },
+          orders: [
+            {
+              column: 'sortNum',
+              asc: true
+            }
+          ]
+        }
+        getObjectDataEqpGroupHttp(params).then(res => {
+          const resData: any = res
+          proxyData.curtainData = resData.count ? resData.content : []
+          for (let i = 0; i < proxyData.curtainData.length; i++) {
+            let item = proxyData.curtainData[i]
+            item.childDownFlag = false
+            item.childUpFlag = false
+            item.childCount = 2
+            item.childCountText = ''
+          }
+        })
+      },
+      // 点击展示所有的登录
+      showAll() {
+        proxyData.showFlag = !proxyData.showFlag
+        if (proxyData.showFlag) {
+          proxyData.lightIcon = 'arrow-up'
+        } else {
+          proxyData.lightIcon = 'arrow-down'
+        }
+      },
+      checkCount() {
+        if (proxyData.count > 0) {
+          return true
+        } else {
+          return false
+        }
+      },
+      // 窗帘总开关
+      handleTotal(setType: string) {
+        if (proxyData.userIsControl) {
+          let flag = proxyData.checkCount()
+          /**
+           * flag:true 代表指令正在发送中,false:代表当前没有指令在发送
+           */
+          if (!flag) {  // 只要有一条指令在发送中,要求其它指令不能再发送
+            proxyData.changeStatus(setType)
+            let arr = JSON.parse(JSON.stringify(proxyData.curtainData))  // 窗帘数据
+            let paramsArr = proxyData.setParams(arr, setType)
+            // 更新窗帘的按钮可点击状态
+            proxyData.setSwitchStatus(setType)
+            // 发送窗帘指令
+            setEquipeHttp(paramsArr).then(res => {
+            })
+          }
+        } else {
+          Toast('您没有当前空间的控制权限!')
+        }
+      },
+      handleChild(setType: string, id: any, index: any) {
+        if (proxyData.userIsControl) {
+          let flag = proxyData.checkCount()
+          /**
+           * flag:true 代表指令正在发送中,false:代表当前没有指令在发送
+           */
+          if (!flag) {  // 只要有一条指令在发送中,要求其它指令不能再发送
+            let childItem: any = proxyData.curtainData[index]
+            const params = {
+              projectId: proxyData.projectId,
+              objectId: id,                // 设备ID/窗帘组ID
+              equipmentCategory: 'CFSSES',  // 设备编码 窗帘:CFSSES
+              infoCode: setType,  // 窗帘开设定:EquipOnSet 窗帘关设定:EquipOffSet
+              value: 1                // 窗帘 1 移动/停止
+            }
+            let paramsArr = []
+            paramsArr.push(params)
+            // 更新窗帘的按钮可点击状态
+            proxyData.changeStatus(setType, childItem)
+            proxyData.setSwitchStatus(setType, childItem)
+            // 发送窗帘指令
+            setEquipeHttp(paramsArr).then(res => {
+            })
+          }
+        } else {
+          Toast('您没有当前空间的控制权限!')
+        }
+      },
+      clearCurtain() {
+        proxyData.curtainData.map((item: any) => {
+          item.curtainClose = false
+          item.curtainOpen = false
+          proxyData.curtainClose = false
+          proxyData.curtainOpen = false
+        })
+      },
+      changeStatus(setType: any, item: any = null) {
+        proxyData.clearCurtain()
+        if (setType === 'EquipOffSet') {
+          if (item) {
+            item.curtainClose = true
+          } else {
+            proxyData.curtainClose = true
+          }
+        } else {
+          if (item) {
+            item.curtainOpen = true
+          } else {
+            proxyData.curtainOpen = true
+          }
+        }
+      },
+      // 窗帘状态数据
+      setSwitchStatus(setType: any, item: any = null) {
+        proxyData.count = 2  // 恢复count
+        proxyData.countText = '指令下发中'
+        proxyData.timer = setInterval(() => {
+          if (proxyData.count === 0) {
+            proxyData.countText = ''
+            clearInterval(proxyData.timer)
+            proxyData.clearCurtain()
+          }
+          if (proxyData.count === 1) {
+            proxyData.countText = '再次点击停止窗帘'
+          }
+          if (proxyData.count > 0) {
+            proxyData.count--
+          } else {
+            proxyData.count = 0
+          }
+        }, 1000)
+      },
+      // 设置发送给后台的窗帘数据
+      setParams(arr: any, setType: any) {
+        let paramsArr = []
+        for (let i = 0; i < arr.length; i++) {
+          let obj = {
+            objectId: arr[i].id,                // 设备ID/窗帘组ID
+            equipmentCategory: 'CFSSES',  // 设备编码 窗帘:CFSSES
+            infoCode: setType,  // 窗帘开设定:EquipOnSet 窗帘关设定:EquipOffSet
+            value: 1
+          }
+          paramsArr.push(obj)
+        }
+        return paramsArr
+      }
+    })
+    const isShowChildLight = computed(() => {
+      return proxyData.curtainData.length && proxyData.curtainData.length > 1
+    })
+    watch(
+      props,
+      (newProps: any) => {
+        if (newProps.spaceId) {
+          // 当前空间的控制权限
+          proxyData.getEqpGroup()
+          proxyData.userIsControl = newProps.userIsControl
+        }
+      }
+    )
+    onMounted(() => {
+      // 获取空调信息
+      proxyData.getEqpGroup()
+    })
+    return {
+      isShowChildLight,
+      ...toRefs(proxyData)
+    }
+  }
+})
+</script>
+<style lang="scss" scoped>
+.curtain {
+  width: 100%;
+  padding-top: 10px;
+  padding-right: 10px;
+  background: #FFFFFF;
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
+  border-radius: 25px;
+  margin: 15px 0px;
+}
+
+.curtain-top {
+  padding-left: 20px;
+  min-height: 130px;
+  //padding-bottom: 30px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.curtain-desc {
+  flex: 1 98px;
+  padding-top: 10px;
+  font-family: PingFang SC;
+  font-size: 16px;
+  line-height: 19px;
+  color: #4D5262;
+  flex: none;
+  order: 0;
+  flex-grow: 0;
+  margin: 5px 0px;
+}
+
+.curtain-right {
+  position: relative;
+  width: 110px;
+  text-align: center;
+
+  img {
+    width: 92px;
+    height: 69px;
+  }
+
+  .curtain-control {
+    position: absolute;
+    right: 10px;
+    bottom: 0px;
+  }
+}
+
+.curtain-title {
+  font-family: PingFang SC;
+  padding-left: 5px;
+  font-size: 16px;
+  line-height: 19px;
+  color: #4D5262;
+  flex: none;
+  order: 0;
+  flex-grow: 0;
+  margin: 5px 0px;
+}
+
+.curtain-status {
+  font-family: PingFang SC;
+  padding-left: 5px;
+  font-size: 14px;
+  line-height: 16px;
+  color: #C4C4C4;
+  flex: none;
+  order: 1;
+  flex-grow: 0;
+  margin: 10px 0px;
+
+  .curtain-tip {
+    display: block;
+    padding-top: 20px;
+  }
+}
+
+.show-all {
+  font-family: PingFang SC;
+  //display: none;
+  .curtain-icon {
+    font-size: 12px;
+    padding-right: 10px;
+  }
+
+  padding-top: 28px;
+  padding-bottom: 22px;
+  font-size: 14px;
+  line-height: 16px;
+  color: #c4c4c4;
+  margin: 0px 5px;
+}
+
+.curtain-control {
+  text-align: right;
+  padding-bottom: 15px;
+  width: 100px;
+  padding-top: 5px;
+  //padding-right: 10px;
+
+  .control-item {
+    width: 40px;
+    display: inline-block;
+    height: 40px;
+    text-align: center;
+    border-radius: 50%;
+    background: rgba(196, 196, 196, 0.2);
+
+
+    img {
+      margin-top: 10px;
+      width: 19px;
+      height: 19px;
+    }
+  }
+
+  .control-item-disabled {
+    opacity: 0.3;
+  }
+
+  .timer-text {
+    width: 40px;
+    display: inline-block;
+    line-height: 40px;
+    font-size: 18px;
+    color: #fff;
+    margin: 0;
+    text-align: center;
+  }
+}
+
+.child-curtain {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 15px 0px 28px;
+  border-top: 1px solid rgba(196, 196, 196, 0.4);
+
+  .child-title {
+    flex: 1 110px;
+    font-weight: 500;
+    font-family: PingFang SC;
+    font-size: 16px;
+    height: 40px;
+    line-height: 40px;
+    color: #4D5262;
+  }
+
+  .curtain-control {
+    text-align: right;
+    padding-right: 0;
+  }
+}
+
+</style>