6月4日晚

assets/images/xframe_left_active.svg

@@ -0,0 +1 @@
+<svg id="bdd7af63-9535-406e-8c5c-17d168f6f2e7" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>元素</title><path d="M24.73,4.42a.53.53,0,0,0,.24-.7.52.52,0,0,0-.7-.25c-.13.07-3,1.49-3.63,4.18a5.91,5.91,0,0,0-2-1.41,4.1,4.1,0,0,0-4.75,1,4.07,4.07,0,0,0-.76,4.55,3.31,3.31,0,0,0,3.4,1.93.53.53,0,1,0-.09-1,2.31,2.31,0,0,1-2.37-1.33A3,3,0,0,1,14.67,8a3,3,0,0,1,3.58-.81A5.34,5.34,0,0,1,21.34,12c-.12,3.5-3.86,7-5,8-.26.22-.55.47-.88.71a5.59,5.59,0,0,0,.11-3.66c-.88-2.67-4.07-2.92-6.53-2.32-3.86.94-6.82,5.15-9,8.72l0,.07,0,.11a.46.46,0,0,0,0,.19l0,.1s0,.05,0,.07c2.15,3.57,5.1,7.79,9,8.73A9.21,9.21,0,0,0,11.2,33c1.9,0,3.72-.67,4.36-2.59a5.62,5.62,0,0,0-.17-3.86c.41.3.79.6,1.1.88,1.14,1,4.89,4.5,5,8a5.37,5.37,0,0,1-3.09,4.8,3,3,0,0,1-3.58-.82,3,3,0,0,1-.57-3.36,2.3,2.3,0,0,1,2.37-1.34.52.52,0,0,0,.57-.48.53.53,0,0,0-.48-.57,3.34,3.34,0,0,0-3.41,1.93,4.07,4.07,0,0,0,.76,4.55,4.26,4.26,0,0,0,3.08,1.4,4.21,4.21,0,0,0,1.67-.35A5.75,5.75,0,0,0,20.55,40c.49,2.91,3.56,4.46,3.71,4.52a.46.46,0,0,0,.22.06.53.53,0,0,0,.48-.3.54.54,0,0,0-.25-.71S21.36,41.91,21.53,39a.89.89,0,0,0,0-.15,6.09,6.09,0,0,0,1-3.48c-.11-3.23-2.75-6.28-4.51-8,1.34-.71,3.17-2.77,3.17-4s-1.88-2.9-2.92-3.78c1.74-1.74,4-4.57,4.09-7.55a6,6,0,0,0-.84-3.14C21.47,6.07,24.7,4.43,24.73,4.42Zm-4.56,19c0,.94-2.15,3.16-2.92,3.23l0,0h0a8.91,8.91,0,0,0-4.51-2.35,4.61,4.61,0,0,0-3.53,1A3.47,3.47,0,0,0,8,27.92a.52.52,0,1,0,1,0,2.37,2.37,0,0,1,.78-1.83,3.22,3.22,0,0,1,1.69-.73.79.79,0,0,0,.22,0,2.25,2.25,0,0,1,2.17.75,4.35,4.35,0,0,1,.63,3.95c-.65,2-3.25,2.12-5.28,1.63-3.39-.83-6.11-4.64-8.14-8,2-3.34,4.75-7.15,8.14-8,2-.5,4.63-.37,5.28,1.63a4.32,4.32,0,0,1-.63,3.95,2.11,2.11,0,0,1-1.1.69l-.42.08h-.14a4.18,4.18,0,0,1-.5,0,.79.79,0,0,0-.22,0,3.22,3.22,0,0,1-1.86-.76,2.36,2.36,0,0,1-.77-1.83A.52.52,0,0,0,8.4,19a.52.52,0,0,0-.52.52A3.44,3.44,0,0,0,9,22.12a4.44,4.44,0,0,0,3,1.06,3.87,3.87,0,0,0,.48,0l.23,0A8.89,8.89,0,0,0,17,20.8l.52-.46C18.87,21.45,20.17,22.84,20.17,23.38Z" style="fill:#b03232"/><polygon points="161.39 3.71 78.17 3.71 44.95 3.71 44.95 12.85 36.94 12.85 36.94 34.89 44.95 34.89 44.95 44.67 78.17 44.67 161.39 44.67 161.39 34.89 169.41 34.89 169.41 12.85 161.39 12.85 161.39 3.71" style="fill:#b03232"/><path d="M167.22,0H39.13V2.21h-7V45.79h7V48H167.22V45.79h7V2.21h-7Zm5.45,3.71V44.29h-8.55V38.85h5.17v1.78h-3v1.5h4.51V37.34h-8.18v8.45h3.11v.71H40.63v-.71h3.1V37.34H35.56v4.79h4.51v-1.5h-3V38.85h5.16v5.44H33.68V3.71h8.54V8.59H37.69V7.18h2.19V5.68H36.19V10.1h7.54V2.21h-3.1V1.5H165.72v.71h-3.11V10.1h7.55V5.68h-3.69v1.5h2.19V8.59h-4.54V3.71Z" style="fill:#b03232"/></svg>

assets/images/xframe_left_normal.svg

@@ -0,0 +1 @@
+<svg id="8a8219e5-8ed7-4f5c-91cb-3b879dcf737a" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>元素</title><path d="M24.73,4.42a.53.53,0,0,0,.24-.7.52.52,0,0,0-.7-.25c-.13.07-3,1.49-3.63,4.18a5.91,5.91,0,0,0-2-1.41,4.1,4.1,0,0,0-4.75,1,4.07,4.07,0,0,0-.76,4.55,3.31,3.31,0,0,0,3.4,1.93.53.53,0,1,0-.09-1,2.31,2.31,0,0,1-2.37-1.33A3,3,0,0,1,14.67,8a3,3,0,0,1,3.58-.81A5.34,5.34,0,0,1,21.34,12c-.12,3.5-3.86,7-5,8-.26.22-.55.47-.88.71a5.59,5.59,0,0,0,.11-3.66c-.88-2.67-4.07-2.92-6.53-2.32-3.86.94-6.82,5.15-9,8.72l0,.07,0,.11a.46.46,0,0,0,0,.19l0,.1s0,.05,0,.07c2.15,3.57,5.1,7.79,9,8.73A9.21,9.21,0,0,0,11.2,33c1.9,0,3.72-.67,4.36-2.59a5.62,5.62,0,0,0-.17-3.86c.41.3.79.6,1.1.88,1.14,1,4.89,4.5,5,8a5.37,5.37,0,0,1-3.09,4.8,3,3,0,0,1-3.58-.82,3,3,0,0,1-.57-3.36,2.3,2.3,0,0,1,2.37-1.34.52.52,0,0,0,.57-.48.53.53,0,0,0-.48-.57,3.34,3.34,0,0,0-3.41,1.93,4.07,4.07,0,0,0,.76,4.55,4.26,4.26,0,0,0,3.08,1.4,4.21,4.21,0,0,0,1.67-.35A5.75,5.75,0,0,0,20.55,40c.49,2.91,3.56,4.46,3.71,4.52a.46.46,0,0,0,.22.06.53.53,0,0,0,.48-.3.54.54,0,0,0-.25-.71S21.36,41.91,21.53,39a.89.89,0,0,0,0-.15,6.09,6.09,0,0,0,1-3.48c-.11-3.23-2.75-6.28-4.51-8,1.34-.71,3.17-2.77,3.17-4s-1.88-2.9-2.92-3.78c1.74-1.74,4-4.57,4.09-7.55a6,6,0,0,0-.84-3.14C21.47,6.07,24.7,4.43,24.73,4.42Zm-4.56,19c0,.94-2.15,3.16-2.92,3.23l0,0h0a8.91,8.91,0,0,0-4.51-2.35,4.61,4.61,0,0,0-3.53,1A3.47,3.47,0,0,0,8,27.92a.52.52,0,1,0,1,0,2.37,2.37,0,0,1,.78-1.83,3.22,3.22,0,0,1,1.69-.73.79.79,0,0,0,.22,0,2.25,2.25,0,0,1,2.17.75,4.35,4.35,0,0,1,.63,3.95c-.65,2-3.25,2.12-5.28,1.63-3.39-.83-6.11-4.64-8.14-8,2-3.34,4.75-7.15,8.14-8,2-.5,4.63-.37,5.28,1.63a4.32,4.32,0,0,1-.63,3.95,2.11,2.11,0,0,1-1.1.69l-.42.08h-.14a4.18,4.18,0,0,1-.5,0,.79.79,0,0,0-.22,0,3.22,3.22,0,0,1-1.86-.76,2.36,2.36,0,0,1-.77-1.83A.52.52,0,0,0,8.4,19a.52.52,0,0,0-.52.52A3.44,3.44,0,0,0,9,22.12a4.44,4.44,0,0,0,3,1.06,3.87,3.87,0,0,0,.48,0l.23,0A8.89,8.89,0,0,0,17,20.8l.52-.46C18.87,21.45,20.17,22.84,20.17,23.38Z" style="fill:#b28647"/><path d="M149.79,5.31v9.14h8V33.29h-8v9.78H46.56V33.29h-8V14.45h8V5.31H149.79m1.6-1.6H45v9.14h-8v22h8v9.78H151.39V34.89h8v-22h-8V3.71Z" style="fill:#b28647"/><path d="M157.22,0H39.13V2.21h-7V45.79h7V48H157.22V45.79h7V2.21h-7Zm5.45,3.71V44.29h-8.55V38.85h5.17v1.78h-3v1.5h4.51V37.34h-8.18v8.45h3.11v.71H40.63v-.71h3.1V37.34H35.56v4.79h4.51v-1.5h-3V38.85h5.16v5.44H33.68V3.71h8.54V8.59H37.69V7.18h2.19V5.68H36.19V10.1h7.54V2.21h-3.1V1.5H155.72v.71h-3.11V10.1h7.55V5.68h-3.69v1.5h2.19V8.59h-4.54V3.71Z" style="fill:#b28647"/></svg>

assets/images/xframe_mid_active.svg

@@ -0,0 +1 @@
+<svg id="8cdf8bd8-ac64-433c-bbef-8ec8a5d3c477" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>元素</title><polygon points="82.22 3.71 -1 3.71 -34.22 3.71 -34.22 12.85 -42.24 12.85 -42.24 34.89 -34.22 34.89 -34.22 44.67 -1 44.67 82.22 44.67 82.22 34.89 90.24 34.89 90.24 12.85 82.22 12.85 82.22 3.71" style="fill:#b03232"/><path d="M88.05,0H-40V2.21h-7V45.79h7V48H88.05V45.79h7V2.21h-7Zm5.44,3.71V44.29H85V38.85h5.17v1.78h-3v1.5h4.51V37.34H83.44v8.45h3.11v.71H-38.55v-.71h3.11V37.34h-8.18v4.79h4.51v-1.5h-3V38.85h5.17v5.44h-8.54V3.71h8.54V8.59h-4.54V7.18h2.19V5.68H-43V10.1h7.55V2.21h-3.11V1.5H86.55v.71H83.44V10.1H91V5.68H87.3v1.5h2.19V8.59H85V3.71Z" style="fill:#b03232"/></svg>

assets/images/xframe_mid_normal.svg

@@ -0,0 +1 @@
+<svg id="8da2a98c-ab31-4e1f-99ed-bc4399b2eb3c" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>元素</title><path d="M75.62,5.31v9.14h8V33.29h-8v9.78H-27.62V33.29h-8V14.45h8V5.31H75.62m1.6-1.6H-29.22v9.14h-8v22h8v9.78H77.22V34.89h8v-22h-8V3.71Z" style="fill:#b28647"/><path d="M83.05,0H-35V2.21h-7V45.79h7V48H83.05V45.79h7V2.21h-7Zm5.44,3.71V44.29H80V38.85h5.17v1.78h-3v1.5h4.51V37.34H78.44v8.45h3.11v.71H-33.55v-.71h3.11V37.34h-8.18v4.79h4.51v-1.5h-3V38.85h5.17v5.44h-8.54V3.71h8.54V8.59h-4.54V7.18h2.19V5.68H-38V10.1h7.55V2.21h-3.11V1.5H81.55v.71H78.44V10.1H86V5.68H82.3v1.5h2.19V8.59H80V3.71Z" style="fill:#b28647"/></svg>

assets/images/xframe_right_active.svg

@@ -0,0 +1 @@
+<svg id="c2eee251-1be4-400a-89e9-055596c6c9f6" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>元素</title><polygon points="3.04 3.71 -80.17 3.71 -113.39 3.71 -113.39 12.85 -121.41 12.85 -121.41 34.89 -113.39 34.89 -113.39 44.67 -80.17 44.67 3.04 44.67 3.04 34.89 11.06 34.89 11.06 12.85 3.04 12.85 3.04 3.71" style="fill:#b03232"/><path d="M48,23.64l0-.11,0-.07c-2.14-3.57-5.1-7.78-9-8.72-2.46-.6-5.65-.35-6.53,2.32a5.59,5.59,0,0,0,.11,3.66c-.33-.24-.62-.49-.88-.71-1.15-1-4.89-4.5-5-8a5.34,5.34,0,0,1,3.09-4.8A3,3,0,0,1,33.33,8a3,3,0,0,1,.57,3.37,2.31,2.31,0,0,1-2.37,1.33.53.53,0,1,0-.09,1,3.31,3.31,0,0,0,3.4-1.93,4.07,4.07,0,0,0-.76-4.55,4.1,4.1,0,0,0-4.75-1,5.91,5.91,0,0,0-2,1.41c-.65-2.69-3.5-4.11-3.63-4.18a.52.52,0,0,0-.7.25.53.53,0,0,0,.24.7s3.26,1.65,3.19,4.51a6,6,0,0,0-.84,3.14c.09,3,2.35,5.81,4.09,7.55-1,.88-2.92,2.6-2.92,3.78s1.83,3.32,3.17,4c-1.76,1.68-4.4,4.73-4.51,8a6.09,6.09,0,0,0,1,3.48.89.89,0,0,0,0,.15c.17,2.89-3.15,4.56-3.18,4.57a.54.54,0,0,0-.25.71.53.53,0,0,0,.48.3.46.46,0,0,0,.22-.06c.15-.06,3.22-1.61,3.71-4.52a5.75,5.75,0,0,0,1.73,1.17,4.21,4.21,0,0,0,1.67.35,4.26,4.26,0,0,0,3.08-1.4,4.07,4.07,0,0,0,.76-4.55,3.34,3.34,0,0,0-3.41-1.93.53.53,0,0,0-.48.57.52.52,0,0,0,.57.48,2.3,2.3,0,0,1,2.37,1.34,3.19,3.19,0,0,1-4.15,4.18,5.37,5.37,0,0,1-3.09-4.8c.12-3.5,3.87-7,5-8,.31-.28.69-.58,1.1-.88a5.62,5.62,0,0,0-.17,3.86C33.08,32.33,34.9,33,36.8,33A9.21,9.21,0,0,0,39,32.73c3.86-.94,6.81-5.16,9-8.73,0,0,0,0,0-.07l0-.1a.46.46,0,0,0,0-.19ZM38.71,31.7c-2,.49-4.63.36-5.28-1.63a4.35,4.35,0,0,1,.63-3.95,2.25,2.25,0,0,1,2.17-.75.79.79,0,0,0,.22,0,3.22,3.22,0,0,1,1.69.73,2.37,2.37,0,0,1,.78,1.83.52.52,0,1,0,1,0,3.47,3.47,0,0,0-1.12-2.62,4.61,4.61,0,0,0-3.53-1,8.91,8.91,0,0,0-4.51,2.35h0l0,0c-.77-.07-2.92-2.29-2.92-3.23,0-.54,1.3-1.93,2.61-3l.52.46a8.89,8.89,0,0,0,4.36,2.32l.23,0a3.87,3.87,0,0,0,.48,0,4.44,4.44,0,0,0,3-1.06,3.44,3.44,0,0,0,1.12-2.62A.52.52,0,0,0,39.6,19a.52.52,0,0,0-.53.52,2.36,2.36,0,0,1-.77,1.83,3.22,3.22,0,0,1-1.86.76.79.79,0,0,0-.22,0,4.18,4.18,0,0,1-.5,0h-.14L35.16,22a2.11,2.11,0,0,1-1.1-.69,4.32,4.32,0,0,1-.63-3.95c.65-2,3.25-2.13,5.28-1.63,3.39.83,6.11,4.64,8.14,8C44.82,27.06,42.1,30.87,38.71,31.7Z" style="fill:#b03232"/><path d="M8.87,0H-119.22V2.21h-7V45.79h7V48H8.87V45.79h7V2.21h-7Zm5.45,3.71V44.29H5.78V38.85h5.16v1.78h-3v1.5h4.51V37.34H4.27v8.45h3.1v.71H-117.72v-.71h3.11V37.34h-8.18v4.79h4.51v-1.5h-3V38.85h5.17v5.44h-8.55V3.71h8.55V8.59h-4.54V7.18h2.19V5.68h-3.69V10.1h7.55V2.21h-3.11V1.5H7.37v.71H4.27V10.1h7.54V5.68H8.12v1.5h2.19V8.59H5.78V3.71Z" style="fill:#b03232"/></svg>

assets/images/xframe_right_normal.svg

@@ -0,0 +1 @@
+<svg id="8ae9f832-b340-4665-b625-39e3d8ca6ac1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>元素</title><path d="M1.44,5.31v9.14h8V33.29h-8v9.78H-101.79V33.29h-8V14.45h8V5.31H1.44M3,3.71H-103.39v9.14h-8v22h8v9.78H3V34.89h8v-22H3V3.71Z" style="fill:#b28647"/><path d="M48,23.64l0-.11,0-.07c-2.14-3.57-5.1-7.78-9-8.72-2.46-.6-5.65-.35-6.53,2.32a5.59,5.59,0,0,0,.11,3.66c-.33-.24-.62-.49-.88-.71-1.15-1-4.89-4.5-5-8a5.34,5.34,0,0,1,3.09-4.8A3,3,0,0,1,33.33,8a3,3,0,0,1,.57,3.37,2.31,2.31,0,0,1-2.37,1.33.53.53,0,1,0-.09,1,3.31,3.31,0,0,0,3.4-1.93,4.07,4.07,0,0,0-.76-4.55,4.1,4.1,0,0,0-4.75-1,5.91,5.91,0,0,0-2,1.41c-.65-2.69-3.5-4.11-3.63-4.18a.52.52,0,0,0-.7.25.53.53,0,0,0,.24.7s3.26,1.65,3.19,4.51a6,6,0,0,0-.84,3.14c.09,3,2.35,5.81,4.09,7.55-1,.88-2.92,2.6-2.92,3.78s1.83,3.32,3.17,4c-1.76,1.68-4.4,4.73-4.51,8a6.09,6.09,0,0,0,1,3.48.89.89,0,0,0,0,.15c.17,2.89-3.15,4.56-3.18,4.57a.54.54,0,0,0-.25.71.53.53,0,0,0,.48.3.46.46,0,0,0,.22-.06c.15-.06,3.22-1.61,3.71-4.52a5.75,5.75,0,0,0,1.73,1.17,4.21,4.21,0,0,0,1.67.35,4.26,4.26,0,0,0,3.08-1.4,4.07,4.07,0,0,0,.76-4.55,3.34,3.34,0,0,0-3.41-1.93.53.53,0,0,0-.48.57.52.52,0,0,0,.57.48,2.3,2.3,0,0,1,2.37,1.34,3.19,3.19,0,0,1-4.15,4.18,5.37,5.37,0,0,1-3.09-4.8c.12-3.5,3.87-7,5-8,.31-.28.69-.58,1.1-.88a5.62,5.62,0,0,0-.17,3.86C33.08,32.33,34.9,33,36.8,33A9.21,9.21,0,0,0,39,32.73c3.86-.94,6.81-5.16,9-8.73,0,0,0,0,0-.07l0-.1a.46.46,0,0,0,0-.19ZM38.71,31.7c-2,.49-4.63.36-5.28-1.63a4.35,4.35,0,0,1,.63-3.95,2.25,2.25,0,0,1,2.17-.75.79.79,0,0,0,.22,0,3.22,3.22,0,0,1,1.69.73,2.37,2.37,0,0,1,.78,1.83.52.52,0,1,0,1,0,3.47,3.47,0,0,0-1.12-2.62,4.61,4.61,0,0,0-3.53-1,8.91,8.91,0,0,0-4.51,2.35h0l0,0c-.77-.07-2.92-2.29-2.92-3.23,0-.54,1.3-1.93,2.61-3l.52.46a8.89,8.89,0,0,0,4.36,2.32l.23,0a3.87,3.87,0,0,0,.48,0,4.44,4.44,0,0,0,3-1.06,3.44,3.44,0,0,0,1.12-2.62A.52.52,0,0,0,39.6,19a.52.52,0,0,0-.53.52,2.36,2.36,0,0,1-.77,1.83,3.22,3.22,0,0,1-1.86.76.79.79,0,0,0-.22,0,4.18,4.18,0,0,1-.5,0h-.14L35.16,22a2.11,2.11,0,0,1-1.1-.69,4.32,4.32,0,0,1-.63-3.95c.65-2,3.25-2.13,5.28-1.63,3.39.83,6.11,4.64,8.14,8C44.82,27.06,42.1,30.87,38.71,31.7Z" style="fill:#b28647"/><path d="M8.87,0H-109.22V2.21h-7V45.79h7V48H8.87V45.79h7V2.21h-7Zm5.45,3.71V44.29H5.78V38.85h5.16v1.78h-3v1.5h4.51V37.34H4.27v8.45h3.1v.71H-107.72v-.71h3.11V37.34h-8.18v4.79h4.51v-1.5h-3V38.85h5.17v5.44h-8.55V3.71h8.55V8.59h-4.54V7.18h2.19V5.68h-3.69V10.1h7.55V2.21h-3.11V1.5H7.37v.71H4.27V10.1h7.54V5.68H8.12v1.5h2.19V8.59H5.78V3.71Z" style="fill:#b28647"/></svg>

assets/style/v-layout.css

@@ -57,22 +57,50 @@
 }
 
 .v-tabs-item {
-    width: 180px;
-    height: 45px;
-    margin: 0 20px;
+    position: relative;
+    padding: 0 20px;
+    margin: 0 70px;
+    height: 44px;
     line-height: 42px;
     color: #b89f5c;
     text-align: center;
-    background-image: url("../images/xframe_1normal.svg");
-    background-repeat: no-repeat;
+    background-image: url("../images/xframe_mid_normal.svg");
     background-size: contain;
     cursor: pointer;
 }
+.v-tabs-item:before{
+    content: "";
+    position: absolute;
+    top:0;
+    left: -44px;
+    background-image: url("../images/xframe_left_normal.svg");
+    background-size: contain;
+    width: 44px;
+    height: 44px;
+}
+.v-tabs-item:after{
+    content: "";
+    position: absolute;
+    top:0;
+    right: -44px;
+    background-image: url("../images/xframe_right_normal.svg");
+    background-size: contain;
+    width: 44px;
+    height: 44px;
+}
 
-.v-tabs-item.active {
+.v-tabs-item.active,.v-tabs-item:hover {
+    background-image: url("../images/xframe_mid_active.svg");
+    background-size: contain;
+    cursor: pointer;
     color: #fff;
-    background-image: url("../images/xframe_1active.svg");
-    background-repeat: no-repeat;
+}
+.v-tabs-item.active:before,.v-tabs-item:hover:before{
+    background-image: url("../images/xframe_left_active.svg");
+    background-size: contain;
+}
+.v-tabs-item.active:after,.v-tabs-item:hover:after{
+    background-image: url("../images/xframe_right_active.svg");
     background-size: contain;
 }
 
@@ -136,11 +164,38 @@
 }
 
 .v-list.card .list-item {
+    position: relative;
     flex-wrap: nowrap;
     margin: 20px 0;
     padding: 40px;
     background: #fff;
     cursor: pointer;
+    transition: all .4s;
+    border-width: 1px;
+    border-style: solid;
+    border-color: transparent;
+}
+.v-list.card .list-item::before {
+    content: "";
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    width: 30px;
+    height: 30px;
+    background-image: url("../images/flower.svg");
+    background-repeat: no-repeat;
+}
+
+.v-list.card .list-item::after {
+    content: "";
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    width: 30px;
+    height: 30px;
+    background-image: url("../images/flower.svg");
+    background-repeat: no-repeat;
+    transform: rotate(-270deg);
 }
 
 .v-list.card .list-item .item-img {
@@ -149,7 +204,14 @@
     height: 250px;
     overflow: hidden;
     margin-right: 30px;
+    transition: all .4s;
+}
+
+.v-list.card .list-item:hover{
+    border-color:var(--primary);
+
 }
+.v-list.card .list-item:hover .item-img{transform: scale(1.05)}
 
 .v-list.card .list-item .item-img img {
     width: 100%
@@ -251,6 +313,7 @@
     height: 270px;
     overflow: hidden;
 }
+.v-card .image.small{height: 220px}
 
 .v-card .image .play {
     position: absolute;
@@ -266,9 +329,12 @@
 }
 
 .v-card .image img {
-    width: 100%
+    width: 100%;
+    transition: all .4s;
+}
+.v-card:hover .image img{
+    transform: scale(1.1);
 }
-
 .v-card:hover .v-card-title {
     color: var(--primary)
 }
@@ -563,7 +629,8 @@
 
 .mode1 .list {
     padding: 30px;
-    background-image: url("../images/resources1.jpg");
+    background-image: url("../images/news-bg.jpg");
+    background-size: cover;
     height: 400px;
     overflow: hidden
 }
@@ -573,8 +640,11 @@
     margin-bottom: 25px;
 }
 
+
 .mode1 .list .list-item.active {
-    margin-left: 0
+    padding: 20px;
+    margin-left: 0;
+    background: rgba(255,255,255,.25);
 }
 
 .mode1 .list .list-item .item-title {
@@ -584,15 +654,6 @@
 
 }
 
-.mode1 .list .list-item .item-title:before {
-    display: inline-block;
-    content: "";
-    width: 12px;
-    height: 12px;
-    margin-right: 5px;
-    background-image: url("../images/icon-news1.svg");
-    background-repeat: no-repeat;
-}
 
 .mode1 .list .list-item .item-dec {
     color: #fff
@@ -604,15 +665,24 @@
 }
 
 .mode1 .list .list-item .item-date {
+    position: relative;
     color: #fff;
-    margin-right: 15px;
+    margin-right: 30px;
+}
+.mode1 .list .list-item .item-date:after{
+    content: "";
+    position: absolute;
+    right: -15px;
+    top: 5px;
+width: 1px ;
+    height: 50px;
+    background: rgba(255,255,255,.5);
 }
 
-/* 模版2 */
+    /* 模版2 */
 .mode2 {
     position: relative;
     padding: 80px 0 80px 0;
-    background-image: url("../images/b1.png")
 }
 
 .mode2:before {
@@ -662,22 +732,36 @@
 .mode3 .list {
     border-radius: 8px;
     padding: 50px 30px;
-    background-image: url("../images/b7.png");
+    background-image: url("../images/news1-bg.jpg");
 }
 
 .mode3 .list .item-date {
+    position: relative;
     margin-right: 30px;
     text-align: center;
     color: #fff;
 }
+.mode3 .list .item-date::after {
+    content: "";
+    position: absolute;
+    right: -15px;
+    top: 5px;
+    width: 1px;
+    height: 50px;
+    background: rgba(255,255,255,.5);
+}
 
 .mode3 .list .item-date .day {
     font-size: 28px
 }
 
 .mode3 .list .list-item {
-    margin: 0 30px 30px 30px;
+    cursor: pointer;
+    padding: 20px;
+    margin: 0 10px 10px 10px;
+    transition: all .4s;
 }
+.mode3 .list .list-item:hover{background: rgba(255,255,255,.2)}
 
 .mode3 .list .list-item .item-title {
     color: #fff;

pages/fyzy/sp.html

@@ -23,90 +23,143 @@
         <div class="v-pages-title text-center">
             <div class="title-inner"><span class="big">影</span><span class="small">音</span></div>
         </div>
-        <div class="v-tabs row">
+        <div class="v-tabs row" style="margin-bottom: 20px">
             <div class="v-tabs-item active">视频</div>
             <div class="v-tabs-item">音频</div>
         </div>
-        <div class="row">
-            <div class="col-8">
-                <div class="v-card">
-                    <div class="image">
-                        <img src="../../assets/test/s6549a34cb7cc0_870_486_0_74.jpg" alt="" title="">
-                        <div class="play"></div>
+        <div class="v-tabs-con">
+            <div class="v-tabs-con-item">
+                <div class="row">
+                    <div class="col-8">
+                        <div class="v-card">
+                            <div class="image">
+                                <img src="../../assets/test/400.png" alt="" title="">
+                                <div class="play"></div>
+                            </div>
+                            <div class="v-card-title">河北梆子《王宝钏》</div>
+                        </div>
                     </div>
-                    <div class="v-card-title">北京评书《帕米尔雄鹰》</div>
-                </div>
-            </div>
-            <div class="col-8">
-                <div class="v-card">
-                    <div class="image">
-                        <img src="../../assets/test/s6549a344b8fbc_865_484_0_85.png" alt="" title="">
-                        <div class="play"></div>
+                    <div class="col-8">
+                        <div class="v-card">
+                            <div class="image">
+                                <img src="../../assets/test/s6549a344b8fbc_865_484_0_85.png" alt="" title="">
+                                <div class="play"></div>
+                            </div>
+                            <div class="v-card-title">河北梆子《窦娥冤》》</div>
+                        </div>
                     </div>
-                    <div class="v-card-title">北京评书《帕米尔雄鹰》</div>
-                </div>
-            </div>
-            <div class="col-8">
-                <div class="v-card">
-                    <div class="image">
-                        <img src="../../assets/test/s6549a25c13034_860_481_0_83.jpg" alt="" title="">
-                        <div class="play"></div>
+                    <div class="col-8">
+                        <div class="v-card">
+                            <div class="image">
+                                <img src="../../assets/test/s6549a25c13034_860_481_0_83.jpg" alt="" title="">
+                                <div class="play"></div>
+                            </div>
+                            <div class="v-card-title">河北梆子《白蛇传》</div>
+                        </div>
                     </div>
-                    <div class="v-card-title">北京评书《帕米尔雄鹰》</div>
-                </div>
-            </div>
-            <div class="col-8">
-                <div class="v-card">
-                    <div class="image">
-                        <img src="../../assets/test/s6549a22868f71_866_484_0_77.jpg" alt="" title="">
-                        <div class="play"></div>
+                    <div class="col-8">
+                        <div class="v-card">
+                            <div class="image">
+                                <img src="../../assets/test/s6549a22868f71_866_484_0_77.jpg" alt="" title="">
+                                <div class="play"></div>
+                            </div>
+                            <div class="v-card-title">河北梆子《古城会》</div>
+                        </div>
                     </div>
-                    <div class="v-card-title">北京评书《帕米尔雄鹰》</div>
-                </div>
-            </div>
-            <div class="col-8">
-                <div class="v-card">
-                    <div class="image">
-                        <img src="../../assets/test/s6549a34cb7cc0_870_486_0_74.jpg" alt="" title="">
-                        <div class="play"></div>
+                    <div class="col-8">
+                        <div class="v-card">
+                            <div class="image">
+                                <img src="../../assets/test/s6549a34cb7cc0_870_486_0_74.jpg" alt="" title="">
+                                <div class="play"></div>
+                            </div>
+                            <div class="v-card-title">河北梆子《打金枝》》</div>
+                        </div>
                     </div>
-                    <div class="v-card-title">北京评书《帕米尔雄鹰》</div>
-                </div>
-            </div>
-            <div class="col-8">
-                <div class="v-card">
-                    <div class="image">
-                        <img src="../../assets/test/s6549a13eb4258_866_484_0_72.jpg" alt="" title="">
-                        <div class="play"></div>
+                    <div class="col-8">
+                        <div class="v-card">
+                            <div class="image">
+                                <img src="../../assets/test/s6549a13eb4258_866_484_0_72.jpg" alt="" title="">
+                                <div class="play"></div>
+                            </div>
+                            <div class="v-card-title">河北梆子《喜荣归》</div>
+                        </div>
                     </div>
-                    <div class="v-card-title">北京评书《帕米尔雄鹰》</div>
-                </div>
-            </div>
-            <div class="col-8">
-                <div class="v-card">
-                    <div class="image">
-                        <img src="../../assets/test/s6549a03851b47_864_483_0_79.jpg" alt="" title="">
-                        <div class="play"></div>
+                    <div class="col-8">
+                        <div class="v-card">
+                            <div class="image">
+                                <img src="../../assets/test/s6549a03851b47_864_483_0_79.jpg" alt="" title="">
+                                <div class="play"></div>
+                            </div>
+                            <div class="v-card-title">河北梆子《宝莲灯》</div>
+                        </div>
                     </div>
-                    <div class="v-card-title">北京评书《帕米尔雄鹰》</div>
-                </div>
-            </div>
-            <div class="col-8">
-                <div class="v-card">
-                    <div class="image">
-                        <img src="../../assets/test/s65499ff5cb9f4_863_483_0_78.jpg" alt="" title="">
-                        <div class="play"></div>
+                    <div class="col-8">
+                        <div class="v-card">
+                            <div class="image">
+                                <img src="../../assets/test/s65499ff5cb9f4_863_483_0_78.jpg" alt="" title="">
+                                <div class="play"></div>
+                            </div>
+                            <div class="v-card-title">河北梆子《南北和》</div>
+                        </div>
+                    </div>
+                    <div class="col-8">
+                        <div class="v-card">
+                            <div class="image">
+                                <img src="../../assets/test/s65499f0cc98bd_870_486_0_69.jpg" alt="" title="">
+                                <div class="play"></div>
+                            </div>
+                            <div class="v-card-title">河北梆子《虹桥赠珠》</div>
+                        </div>
                     </div>
-                    <div class="v-card-title">北京评书《帕米尔雄鹰》</div>
                 </div>
             </div>
-            <div class="col-8">
-                <div class="v-card">
-                    <div class="image">
-                        <img src="../../assets/test/s65499f0cc98bd_870_486_0_69.jpg" alt="" title="">
-                        <div class="play"></div>
+            <div class="v-tabs-con-item">
+                <div class="row">
+                    <div class="col-8">
+                        <div class="v-card">
+                            <div class="image small">
+                                <img src="../../assets/test/331.png" alt="" title="">
+                                <div class="play"></div>
+                            </div>
+                            <div class="v-card-title">河北梆子《王宝钏》</div>
+                        </div>
+                    </div>
+                    <div class="col-8">
+                        <div class="v-card">
+                            <div class="image small">
+                                <img src="../../assets/test/330.png" alt="" title="">
+                                <div class="play"></div>
+                            </div>
+                            <div class="v-card-title">河北鼓吹乐</div>
+                        </div>
+                    </div>
+                    <div class="col-8">
+                        <div class="v-card">
+                            <div class="image small">
+                                <img src="../../assets/test/332.png" alt="" title="">
+                                <div class="play"></div>
+                            </div>
+                            <div class="v-card-title">冀南鼓乐（杨家鼓）</div>
+                        </div>
+                    </div>
+                    <div class="col-8">
+                        <div class="v-card">
+                            <div class="image small">
+                                <img src="../../assets/test/s6549a03851b47_864_483_0_79.jpg" alt="" title="">
+                                <div class="play"></div>
+                            </div>
+                            <div class="v-card-title">河北梆子《宝莲灯》</div>
+                        </div>
+                    </div>
+                    <div class="col-8">
+                        <div class="v-card">
+                            <div class="image small">
+                                <img src="../../assets/test/s65499f0cc98bd_870_486_0_69.jpg" alt="" title="">
+                                <div class="play"></div>
+                            </div>
+                            <div class="v-card-title">河北梆子《虹桥赠珠》</div>
+                        </div>
                     </div>
-                    <div class="v-card-title">北京评书《帕米尔雄鹰》</div>
                 </div>
             </div>
         </div>
@@ -135,6 +188,17 @@
             cur1.addClass('cur'); // 确保 cur 是一个有效的 jQuery 对象
         });
     })
+    $(function () {
+        $(".v-tabs-item").eq(0).addClass("active");
+        $(".v-tabs-con .v-tabs-con-item").eq(0).show().siblings().hide();
+
+        $(".v-tabs-item").click(function (i) {
+            var index = $(this).index();
+            $(this).addClass("active").siblings().removeClass("active");
+            $(".v-tabs-con .v-tabs-con-item").eq(index).show().siblings().hide();
+            return false;
+        })
+    })
 </script>
 </body>
 </html>

pages/shenbao/xbzn.html

@@ -15,15 +15,39 @@
     <div class="v-contain row">
         <div class="v-bread-item">首页</div>
         <div class="v-bread-item">申报指南</div>
-        <div class="v-bread-item">申报指南</div>
     </div>
 </div>
 <div class="v-pages">
     <div class="v-contain">
         <div class="v-pages-title text-center">
-            <div class="title-inner"><span class="big">入会</span><span class="small">须知</span></div>
+            <div class="title-inner"><span class="big">申报</span><span class="small">指南</span></div>
+        </div>
+        <div class="v-list news">
+            <div class="list-item row">
+                <div class="col">关于推荐申报第六批市级非物质文化遗产代表性项目有关事项的通知</div>
+                <div class="date">2022-05-14</div>
+            </div>
+            <div class="list-item row">
+                <div class="col">非遗传承人申请条件和流程</div>
+                <div class="date">2022-05-14</div>
+            </div>
+            <div class="list-item row">
+                <div class="col">非遗申报的流程</div>
+                <div class="date">2022-05-14</div>
+            </div>
+            <div class="list-item row">
+                <div class="col">
+                    国家级非物质文化遗产代表性传承人认定与管理办法
+                </div>
+                <div class="date">2022-05-14</div>
+            </div>
+            <div class="list-item row">
+                <div class="col">
+                    国家级非物质文化遗产代表作申报评定暂行办法
+                </div>
+                <div class="date">2022-05-14</div>
+            </div>
         </div>
-
     </div>
 </div>
 <iframe id="footer" src='../footer.html' width="100%" height="460" target="_self"

pages/xwzx/fynews.html

@@ -32,73 +32,75 @@
                         <div class="year">2024-06</div>
                     </div>
                     <div class="col">
-                        <div class="title">“非遗茶空间”里的“茶生活”</div>
+                        <div class="title">河北省2024“文化和自然遗产日”</div>
                         <div class="dec">
-                            “太音·瑶庐”将浙派“古雅气”融入茶空间的细节中，“禺沐青云”将“巧匠气”藏于茶器中……为促进“中国传统制茶技艺及其相关习俗”项目系统性保护，持续擦亮“世界茶乡看浙江”金名片，扎实做好茶申遗成功“后半篇文章”，近日，浙江省文化广电和旅游厅推出首批25家浙江省级...
+                            河北省2024“文化和自然遗产日”非遗系列宣传展示活动主会场活动“端午·雄安非遗大会”将于6月8日至10日在雄安新区雄安郊野公园举办，主要内容有河北非遗购物节、非遗游园会、非遗音乐会等，通过传统艺术表演、传统技艺互动、传统医药宣传、传统美食体验...
                         </div>
                         <div class="v-more">查看更多</div>
                     </div>
                 </div>
             </div>
             <div class="list-item row">
-                <div class="item-img"><img src="../../assets/test/001.jpg"/></div>
+                <div class="item-img"><img src="../../assets/test/010.jpeg"/></div>
                 <div class="item-cont row">
                     <div class="date">
                         <div class="day">03</div>
                         <div class="year">2024-06</div>
                     </div>
                     <div class="col">
-                        <div class="title">“非遗茶空间”里的“茶生活”</div>
+                        <div class="title">河北井陉：非遗拉花进校园</div>
                         <div class="dec">
-                            “太音·瑶庐”将浙派“古雅气”融入茶空间的细节中，“禺沐青云”将“巧匠气”藏于茶器中……为促进“中国传统制茶技艺及其相关习俗”项目系统性保护，持续擦亮“世界茶乡看浙江”金名片，扎实做好茶申遗成功“后半篇文章”，近日，浙江省文化广电和旅游厅推出首批25家浙江省级...
+                           石家庄，2018年11月21日 河北井陉：非遗拉花进校园 11月20日，在石家庄市井陉县职教中心，学生们在进行拉花表演。 近年来，河北省井陉县加大拉花文化的传承力度，通过举办非遗进校园等活动，让更多年轻人了解、学习拉花。井陉拉花属北方秧歌...
                         </div>
                         <div class="v-more">查看更多</div>
                     </div>
                 </div>
             </div>
             <div class="list-item row">
-                <div class="item-img"><img src="../../assets/test/001.jpg"/></div>
+                <div class="item-img"><img src="../../assets/test/011.jpg"/></div>
                 <div class="item-cont row">
                     <div class="date">
                         <div class="day">03</div>
                         <div class="year">2024-06</div>
                     </div>
                     <div class="col">
-                        <div class="title">“非遗茶空间”里的“茶生活”</div>
+                        <div class="title">中华优秀传统文化是中华民族的“根”和“魂”</div>
                         <div class="dec">
-                            “太音·瑶庐”将浙派“古雅气”融入茶空间的细节中，“禺沐青云”将“巧匠气”藏于茶器中……为促进“中国传统制茶技艺及其相关习俗”项目系统性保护，持续擦亮“世界茶乡看浙江”金名片，扎实做好茶申遗成功“后半篇文章”，近日，浙江省文化广电和旅游厅推出首批25家浙江省级...
+                            在中小学开展中华优秀传统文化教育对传承和弘扬中华优秀传统文化、培育时代新人至关重要。近期，河北各地纷纷开展传统艺术进校园活动，让学生零距离接触、学习传统文化，让传统文化在校园生根发芽，让更多学生从优...
                         </div>
                         <div class="v-more">查看更多</div>
                     </div>
                 </div>
             </div>
             <div class="list-item row">
-                <div class="item-img"><img src="../../assets/test/001.jpg"/></div>
+                <div class="item-img"><img src="../../assets/test/115.jpg"/></div>
                 <div class="item-cont row">
                     <div class="date">
                         <div class="day">03</div>
                         <div class="year">2024-06</div>
                     </div>
                     <div class="col">
-                        <div class="title">“非遗茶空间”里的“茶生活”</div>
+                        <div class="title">全国杂技类非遗代表项目在吴桥集中展演</div>
                         <div class="dec">
-                            “太音·瑶庐”将浙派“古雅气”融入茶空间的细节中，“禺沐青云”将“巧匠气”藏于茶器中……为促进“中国传统制茶技艺及其相关习俗”项目系统性保护，持续擦亮“世界茶乡看浙江”金名片，扎实做好茶申遗成功“后半篇文章”，近日，浙江省文化广电和旅游厅推出首批25家浙江省级...
+                            文明因交流而多彩，文明因互鉴而丰富。杂技艺术自古就是世界各国文化交流的载体。
+
+                            10月20日晚，第十九届中国吴桥国际杂技艺术节开幕式演出将在石家庄市举办，以“艺通四海 桥连五洲”为主题，集中展示中国杂技和世界...
                         </div>
                         <div class="v-more">查看更多</div>
                     </div>
                 </div>
             </div>
             <div class="list-item row">
-                <div class="item-img"><img src="../../assets/test/001.jpg"/></div>
+                <div class="item-img"><img src="../../assets/test/500.jpg"/></div>
                 <div class="item-cont row">
                     <div class="date">
                         <div class="day">03</div>
                         <div class="year">2024-06</div>
                     </div>
                     <div class="col">
-                        <div class="title">“非遗茶空间”里的“茶生活”</div>
+                        <div class="title">京津冀“七年之约”带动文旅高质量发展</div>
                         <div class="dec">
-                            “太音·瑶庐”将浙派“古雅气”融入茶空间的细节中，“禺沐青云”将“巧匠气”藏于茶器中……为促进“中国传统制茶技艺及其相关习俗”项目系统性保护，持续擦亮“世界茶乡看浙江”金名片，扎实做好茶申遗成功“后半篇文章”，近日，浙江省文化广电和旅游厅推出首批25家浙江省级...
+                            一体化构建协同发展体系，一盘棋推动文旅深度融合。京津冀协同发展、长三角一体化发展、成渝地区双城经济圈建设……近年来，多个区域协调发展战略持续向纵深推进，相关政策陆续出台，联动东西南北的发展格局日渐形成和完善...
                         </div>
                         <div class="v-more">查看更多</div>
                     </div>

pages/xwzx/index.html

@@ -29,9 +29,6 @@
                 </div>
                 <div class="col-12">
                     <div class="list">
-                        <div class="list-item">
-                            <div class="item-title">习近平：把中国文明历史研究引向深入 增强历史自觉坚定文...</div>
-                        </div>
                         <div class="list-item active row">
                             <div class="item-date">
                                 <div class="text-center day">15</div>
@@ -44,18 +41,22 @@
                                 </div>
                             </div>
                         </div>
+                        <div class="list-item">
+                            <div class="item-title">习近平：把中国文明历史研究引向深入 增强历史自觉坚定文...</div>
+                        </div>
                         <div class="list-item">
                             <div class="item-title">微视频｜习近平的文化情怀</div>
                         </div>
                         <div class="list-item">
                             <div class="item-title">习近平总书记的非遗情结</div>
                         </div>
+                        <div class="text-end" style="padding-right: 30px">
+                            <div class="v-more white"><a href="fynews.html">查看更多</a></div>
+                        </div>
                     </div>
                 </div>
             </div>
-            <div class="text-center" style="margin-top: 30px">
-                <div class="v-more"><a href="fynews.html">查看更多</a></div>
-            </div>
+
         </div>
     </div>
     <div class="v-pages-item mode2">
@@ -178,10 +179,11 @@
                         </div>
                     </div>
                 </div>
+                <div class="text-center col-24" style="margin-top: 30px">
+                    <div class="v-more white"><a href="tzgg.html">查看更多</a></div>
+                </div>
             </div>
-            <div class="text-center" style="margin-top: 30px">
-                <div class="v-more"><a href="tzgg.html">查看更多</a></div>
-            </div>
+
         </div>
     </div>
 

pages/zcfg/index.html

@@ -5,6 +5,7 @@
     <title>政策法规-河北省非物质文化遗产保护协会</title>
     <link rel="stylesheet" href="../../assets/style/v-global.css">
     <link rel="stylesheet" href="../../assets/style/v-layout.css">
+
     <script src="../Public/static/themes/js/plugs/jquery.min.js"></script>
 </head>
 <body class="bg">
@@ -26,50 +27,147 @@
             <div class="v-tabs-item">联合国教科文组织文件</div>
             <div class="v-tabs-item">重要论述</div>
         </div>
-        <div id="tab1" class="v-list news">
-            <div class="list-item row">
-                <div class="col">中华人民共和国非物质文化遗产法（中华人民共和国主席令第四十二号）</div>
-                <div class="date">2022-05-14</div>
-            </div>
-            <div class="list-item row">
-                <div class="col">中华人民共和国黄河保护法（2022）</div>
-                <div class="date">2022-05-14</div>
-            </div>
-            <div class="list-item row">
-                <div class="col">中共中央办公厅 国务院办公厅印发《“十四五”文化发展规划》</div>
-                <div class="date">2022-05-14</div>
-            </div>
-            <div class="list-item row">
-                <div class="col">
-                    国务院办公厅关于同意调整完善非物质文化遗产保护工作部际联席会议制度的函（国办函〔2022〕13号）
+        <div class="v-tabs-con">
+        <div class="v-tabs-con-item">
+            <div class="v-list news">
+                <div class="list-item row">
+                    <div class="col">中华人民共和国非物质文化遗产法（中华人民共和国主席令第四十二号）</div>
+                    <div class="date">2022-05-14</div>
+                </div>
+                <div class="list-item row">
+                    <div class="col">中华人民共和国黄河保护法（2022）</div>
+                    <div class="date">2022-05-14</div>
+                </div>
+                <div class="list-item row">
+                    <div class="col">中共中央办公厅 国务院办公厅印发《“十四五”文化发展规划》</div>
+                    <div class="date">2022-05-14</div>
+                </div>
+                <div class="list-item row">
+                    <div class="col">
+                        国务院办公厅关于同意调整完善非物质文化遗产保护工作部际联席会议制度的函（国办函〔2022〕13号）
+                    </div>
+                    <div class="date">2022-05-14</div>
+                </div>
+                <div class="list-item row">
+                    <div class="col">中共中央 国务院印发《黄河流域生态保护和高质量发展规划纲要》</div>
+                    <div class="date">2022-05-14</div>
+                </div>
+                <div class="list-item row">
+                    <div class="col">中共中央办公厅 国务院办公厅印发《关于进一步加强非物质文化遗产保护工作的意见》（2021）
+                    </div>
+                    <div class="date">2022-05-14</div>
+                </div>
+                <div class="list-item row">
+                    <div class="col">国务院关于公布第五批国家级非物质文化遗产代表性项目名录的通知（国发〔2021〕8号）</div>
+                    <div class="date">2022-05-14</div>
+                </div>
+                <div class="list-item row">
+                    <div class="col">国务院办公厅关于转发文化部等部门中国传统工艺振兴计划的通知（国办发〔2017〕25号）</div>
+                    <div class="date">2022-05-14</div>
+                </div>
+                <div class="list-item row">
+                    <div class="col">关于实施中华优秀传统文化传承发展工程的意见（2017）</div>
+                    <div class="date">2022-05-14</div>
+                </div>
+                <div class="list-item row">
+                    <div class="col">国务院关于同意设立“文化和自然遗产日”的批复（国函〔2016〕162号）</div>
+                    <div class="date">2022-05-14</div>
                 </div>
-                <div class="date">2022-05-14</div>
-            </div>
-            <div class="list-item row">
-                <div class="col">中共中央 国务院印发《黄河流域生态保护和高质量发展规划纲要》</div>
-                <div class="date">2022-05-14</div>
-            </div>
-            <div class="list-item row">
-                <div class="col">中共中央办公厅 国务院办公厅印发《关于进一步加强非物质文化遗产保护工作的意见》（2021）</div>
-                <div class="date">2022-05-14</div>
-            </div>
-            <div class="list-item row">
-                <div class="col">国务院关于公布第五批国家级非物质文化遗产代表性项目名录的通知（国发〔2021〕8号）</div>
-                <div class="date">2022-05-14</div>
-            </div>
-            <div class="list-item row">
-                <div class="col">国务院办公厅关于转发文化部等部门中国传统工艺振兴计划的通知（国办发〔2017〕25号）</div>
-                <div class="date">2022-05-14</div>
-            </div>
-            <div class="list-item row">
-                <div class="col">关于实施中华优秀传统文化传承发展工程的意见（2017）</div>
-                <div class="date">2022-05-14</div>
             </div>
-            <div class="list-item row">
-                <div class="col">国务院关于同意设立“文化和自然遗产日”的批复（国函〔2016〕162号）</div>
-                <div class="date">2022-05-14</div>
+        </div>
+        <div class="v-tabs-con-item">
+            <div class="v-list news">
+                <div class="list-item row">
+                    <div class="col">保护非物质文化遗产公约（2003）</div>
+                    <div class="date">2022-05-14</div>
+                </div>
+                <div class="list-item row">
+                    <div class="col">保护非物质文化遗产的伦理原则（2016）</div>
+                    <div class="date">2022-05-14</div>
+                </div>
+                <div class="list-item row">
+                    <div class="col">Convention for the Safeguarding of the Intangible Cultural Heritage（2003）</div>
+                    <div class="date">2022-05-14</div>
+                </div>
+                <div class="list-item row">
+                    <div class="col">
+                        实施《保护非物质文化遗产公约》的业务指南（2022年修订版）
+                    </div>
+                    <div class="date">2022-05-14</div>
+                </div>
+                <div class="list-item row">
+                    <div class="col">实施《保护非物质文化遗产公约》的业务指南（2020年修订版）</div>
+                    <div class="date">2022-05-14</div>
+                </div>
+                <div class="list-item row">
+                    <div class="col">实施《保护非物质文化遗产公约》的业务指南（2018年修订版）</div>
+                    <div class="date">2022-05-14</div>
+                </div>
+                <div class="list-item row">
+                    <div class="col">实施《保护非物质文化遗产公约》的业务指南（2016年修订版）</div>
+                    <div class="date">2022-05-14</div>
+                </div>
+                <div class="list-item row">
+                    <div class="col">实施《保护非物质文化遗产公约》的业务指南（2014年修订版）</div>
+                    <div class="date">2022-05-14</div>
+                </div>
+                <div class="list-item row">
+                    <div class="col">实施《保护非物质文化遗产公约》的业务指南（2012年修订版）</div>
+                    <div class="date">2022-05-14</div>
+                </div>
+                <div class="list-item row">
+                    <div class="col">实施《保护非物质文化遗产公约》的业务指南（2010年修订版）</div>
+                    <div class="date">2022-05-14</div>
+                </div>
             </div>
         </div>
+        <div class="v-tabs-con-item">
+            <div class="v-list news">
+                <div class="list-item row">
+                    <div class="col">加强文化遗产保护传承 弘扬中华优秀传统文化</div>
+                    <div class="date">2022-05-14</div>
+                </div>
+                <div class="list-item row">
+                    <div class="col">习近平出席文化传承发展座谈会并发表重要讲话</div>
+                    <div class="date">2022-05-14</div>
+                </div>
+                <div class="list-item row">
+                    <div class="col">习近平对非物质文化遗产保护工作作出重要指示强调 扎实做好非物质文化遗产的系统性保护 推动中华文化更好走向世界</div>
+                    <div class="date">2022-05-14</div>
+                </div>
+                <div class="list-item row">
+                    <div class="col">
+                        习近平：把中国文明历史研究引向深入 增强历史自觉坚定文化自信（习近平总书记2022年5月27日在十九届中央政治局第三十九次集体学习时的讲话）
+                    </div>
+                    <div class="date">2022-05-14</div>
+                </div>
+                <div class="list-item row">
+                    <div class="col">王晨阳：中国式现代化进程中的非物质文化遗产系统性保护</div>
+                    <div class="date">2022-05-14</div>
+                </div>
+                <div class="list-item row">
+                    <div class="col">王晨阳：中国非物质文化遗产保护实践
+                    </div>
+                    <div class="date">2022-05-14</div>
+                </div>
+                <div class="list-item row">
+                    <div class="col">王晨阳：全面推进非物质文化遗产系统性保护</div>
+                    <div class="date">2022-05-14</div>
+                </div>
+                <div class="list-item row">
+                    <div class="col">胡和平：繁荣发展文化事业和文化产业</div>
+                    <div class="date">2022-05-14</div>
+                </div>
+                <div class="list-item row">
+                    <div class="col">胡和平：描绘新时代非遗保护传承美丽画卷</div>
+                    <div class="date">2022-05-14</div>
+                </div>
+                <div class="list-item row">
+                    <div class="col">胡和平：推进文化强国建设和旅游业高质量发展以优异成绩迎接党的二十大胜利召开</div>
+                    <div class="date">2022-05-14</div>
+                </div>
+            </div>
+        </div></div>
         <div class="v-pagination row">
             <div class="v-pagination-prev"></div>
             <div class="v-pagination-item active">1</div>
@@ -91,6 +189,17 @@
             cur.addClass('cur'); // 确保 cur 是一个有效的 jQuery 对象
         });
     })
+    $(function () {
+        $(".v-tabs-item").eq(0).addClass("active");
+        $(".v-tabs-con .v-tabs-con-item").eq(0).show().siblings().hide();
+
+        $(".v-tabs-item").click(function (i) {
+            var index = $(this).index();
+            $(this).addClass("active").siblings().removeClass("active");
+            $(".v-tabs-con .v-tabs-con-item").eq(index).show().siblings().hide();
+            return false;
+        })
+    })
 </script>
 </body>
 </html>