6月4日晚

assets/images/flower1.svg

@@ -0,0 +1 @@
+<svg id="52896823-3cdf-4504-a4d9-2aba59e62e0a" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 114 122"><title>元素</title><path d="M100.06,61.48,99,60.87l.75-.43a21,21,0,0,0-21-36.37l-.89.51V23.44a21,21,0,0,0-42,0V24.8l-.92-.53A21,21,0,0,0,6.25,32h0a21,21,0,0,0,7.69,28.69l1.06.61-.89.51A21,21,0,0,0,6.42,90.46h0a21,21,0,0,0,28.69,7.69l1.06-.62v1a21,21,0,0,0,21,21h0a21,21,0,0,0,21-21V97.34l.89.52a21,21,0,0,0,28.69-7.69h0A21,21,0,0,0,100.06,61.48Z" style="fill:#fff"/><path d="M57.17,121.56a23,23,0,0,1-22.89-20.73A23,23,0,0,1,11.2,61.27,23,23,0,0,1,33.94,21.51a23,23,0,0,1,45.82-.21,23,23,0,0,1,23,39.55,23,23,0,0,1-22.7,39.78A23,23,0,0,1,57.17,121.56Zm-19-27.49v4.5a19,19,0,0,0,38,0V93.88l3.89,2.25a19,19,0,0,0,19-32.91h0L95,60.87l3.75-2.16a19,19,0,0,0-19-32.91L75.86,28v-4.6a19,19,0,0,0-38,0v4.83L33.94,26A19,19,0,0,0,8,33a19,19,0,0,0,7,25.95L19,61.26,15.11,63.5a19,19,0,1,0,19,32.91Z" style="fill:#b28647"/><ellipse cx="53.5" cy="45.65" rx="2.5" ry="15.19" transform="translate(-9.87 15.15) rotate(-14.77)" style="fill:#b28647"/><ellipse cx="43.64" cy="53.86" rx="2.5" ry="15.19" transform="translate(-23.69 70.38) rotate(-64.77)" style="fill:#b28647"/><ellipse cx="43.58" cy="66.7" rx="15.19" ry="2.5" transform="translate(-23.94 24.4) rotate(-24.77)" style="fill:#b28647"/><ellipse cx="53.39" cy="74.99" rx="15.19" ry="2.5" transform="translate(-32.99 106.81) rotate(-74.77)" style="fill:#b28647"/><ellipse cx="66.04" cy="72.81" rx="2.5" ry="15.19" transform="translate(-29.73 50.67) rotate(-34.77)" style="fill:#b28647"/><ellipse cx="72.5" cy="61.72" rx="2.5" ry="15.19" transform="translate(4.43 128.29) rotate(-84.77)" style="fill:#b28647"/><ellipse cx="68.16" cy="49.64" rx="15.19" ry="2.5" transform="translate(-15.19 62.4) rotate(-44.77)" style="fill:#b28647"/></svg>

assets/images/title_line_left_w.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="_x37_08b4efb-2992-4534-a172-c7d1481d6ca0"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 96 20"
+	 style="enable-background:new 0 0 96 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M74.4,1.5c2.2,0,4,1.8,4,4s-1.8,4-4,4H52.2c-2.8,0-5,2.2-5,5s2.2,5,5,5h43v-1h-33c-2.2,0-4-1.8-4-4s1.8-4,4-4
+	h17.6c2.8,0,5-2.2,5-5s-2.2-5-5-5h-79v1h69 M57.2,14.5c0,1.6,0.7,3.1,2,4h-1.7c-2.2,0-4-1.8-4-4s1.8-4,4-4h1.8
+	C58,11.4,57.3,12.9,57.2,14.5z"/>
+</svg>

assets/images/title_line_right_w.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="_x38_a3ae71b-6231-4080-a960-d6c541e85494"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 96 20"
+	 style="enable-background:new 0 0 96 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M21.6,18.5c-2.2,0-4-1.8-4-4s1.8-4,4-4h22.3c2.8,0,5-2.2,5-5s-2.2-5-5-5h-43v1h33c2.2,0,4,1.8,4,4s-1.8,4-4,4
+	H16.2c-2.8,0-5,2.2-5,5s2.2,5,5,5h79v-1h-69 M38.8,5.5c0-1.6-0.7-3.1-2-4h1.7c2.2,0,4,1.8,4,4s-1.8,4-4,4h-1.8
+	C38,8.6,38.7,7.1,38.8,5.5z"/>
+</svg>

assets/style/v-layout.css

@@ -6,9 +6,14 @@
 .bg {
     background-image: url("../images/bg.png")
 }
-#header{position: relative; z-index: 999}
+
+#header {
+    position: relative;
+    z-index: 999
+}
+
 .v-contain {
-    width: 1200px;
+    width: 1400px;
     margin: 0 auto;
 }
 
@@ -20,8 +25,10 @@
 /* 面包屑 */
 .v-bread {
     position: relative;
+    width: 100%;
+    top: 0;
     z-index: 1;
-    margin: -40px 0 20px 0 ;
+
 }
 
 .v-bread-item {
@@ -56,7 +63,7 @@
 .v-article-cont p {
     margin-bottom: 20px;
 }
-
+.v-pages{margin-top: -100px;}
 .v-pages-item {
     margin: 80px 0;
 }
@@ -107,6 +114,14 @@
     color: #333333;
 }
 
+.v-pages-title.white .big{color: #fff;}
+.v-pages-title.white .small{color: #fff;}
+.v-pages-title.white .title-inner::before { background-image: url("../images/title_line_left_w.svg");
+    background-repeat: no-repeat;
+    background-size: contain;}
+.v-pages-title.white .title-inner::after { background-image: url("../images/title_line_right_w.svg");
+    background-repeat: no-repeat;
+    background-size: contain;}
 .mode1 .image {
     height: 400px;
     border-radius: 8px 0 0 8px;
@@ -263,21 +278,27 @@
     height: 14px;
     background-image: url("../images/icon-news.svg");
 }
-.v-box{position: relative;border: 1px solid #a06f3a;}
-.v-box:before{
+
+.v-box {
+    position: relative;
+    border: 1px solid #a06f3a;
+}
+
+.v-box:before {
     content: "";
     position: absolute;
-    top:5px;
-    left:5px;
+    top: 5px;
+    left: 5px;
     width: 30px;
     height: 30px;
     background-image: url("../images/flower.svg");
     background-repeat: no-repeat;
 }
-.v-box:after{
+
+.v-box:after {
     content: "";
     position: absolute;
-    top:5px;
+    top: 5px;
     right: 5px;
     width: 30px;
     height: 30px;
@@ -285,12 +306,18 @@
     background-repeat: no-repeat;
     transform: rotate(-270deg);
 }
+
 /* 表单 */
-.v-form{padding: 50px 80px; background: #fff}
+.v-form {
+    padding: 50px 80px;
+    background: #fff
+}
+
 .v-form section {
     float: left;
     width: 100%;
 }
+
 .v-form .note {
     margin-top: 6px;
     padding: 0 1px;
@@ -298,14 +325,24 @@
     line-height: 15px;
     color: #999;
 }
-.v-form-item{margin-bottom: 30px;}
-.v-form-item .label{min-width: 80px}
-.v-form-item .note{margin-top: 6px;
+
+.v-form-item {
+    margin-bottom: 30px;
+}
+
+.v-form-item .label {
+    min-width: 80px
+}
+
+.v-form-item .note {
+    margin-top: 6px;
     padding: 0 1px;
     font-size: 11px;
     line-height: 15px;
-    color: #999;}
-.v-form  .input input, .v-form .select select, .v-form  .textarea textarea {
+    color: #999;
+}
+
+.v-form .input input, .v-form .select select, .v-form .textarea textarea {
     display: block;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
@@ -324,19 +361,23 @@
     -moz-appearance: none;
     -webkit-appearance: none;
 }
+
 .v-form .input, .v-form .select, .v-form .textarea, .v-form .radio, .v-form .checkbox, .v-form .toggle {
     position: relative;
     display: block;
 }
+
 .v-form .inline-group .radio, .v-form .inline-group .checkbox {
     float: left;
     margin-right: 30px;
 }
-.v-form  .radio input, .v-form  .checkbox input {
+
+.v-form .radio input, .v-form .checkbox input {
     position: absolute;
     left: -9999px;
 }
-.v-form  .radio i, .v-form  .checkbox i {
+
+.v-form .radio i, .v-form .checkbox i {
     position: absolute;
     top: 5px;
     left: 0;
@@ -348,10 +389,12 @@
     border-style: solid;
     background: #fff;
 }
+
 .v-form .radio i {
     border-radius: 50%;
 }
-.v-form  .button {
+
+.v-form .button {
     height: 39px;
     overflow: hidden;
     margin: 10px 0 0 20px;
@@ -363,19 +406,112 @@
     color: #fff;
     cursor: pointer;
 }
-.v-form  .button {
+
+.v-form .button {
     background-color: #694839;
 }
+
 .v-form .button.button-secondary {
     background-color: #b3b3b3;
 }
+
 /* 底部 */
-#footer{margin-top: 50px;}
-.v-footer{padding-top: 55px; border-top: 1px solid #d8d8d8; text-align: center;}
-.v-footer .link{ margin-bottom: 22px;text-align: center;}
-.v-footer .link-item{ position: relative; display: inline-block;  padding: 0 18px;}
-.v-footer .link-item + .link-item:before{ content: ''; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; height: 7px; border-left: 1px solid #c7c7c7;}
-.v-footer .link .s{ padding: 1px 0;}
-.v-footer .cont{ margin-bottom: 35px;text-align: center}
-.v-footer .cont .s + .s{ margin-left: 35px;}
-.v-footer .cont br ~ .s{ margin-left: 0;}
+#footer {
+    margin-top: 50px;
+}
+
+.v-footer {
+    padding-top: 55px;
+    border-top: 1px solid #d8d8d8;
+    text-align: center;
+}
+
+.v-footer .link {
+    margin-bottom: 22px;
+    text-align: center;
+}
+
+.v-footer .link-item {
+    position: relative;
+    display: inline-block;
+    padding: 0 18px;
+}
+
+.v-footer .link-item + .link-item:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    height: 7px;
+    border-left: 1px solid #c7c7c7;
+}
+
+.v-footer .link .s {
+    padding: 1px 0;
+}
+
+.v-footer .cont {
+    margin-bottom: 35px;
+    text-align: center
+}
+
+.v-footer .cont .s + .s {
+    margin-left: 35px;
+}
+
+.v-footer .cont br ~ .s {
+    margin-left: 0;
+}
+
+/* 非遗资源 */
+.v-pages-item.fyzl {
+    padding: 130px 0 20px 0;
+    margin: 0;
+    background-image: url("../images/exhibition_bg.jpg");
+    background-position: 0 bottom;
+    background-repeat: no-repeat;
+    background-size: 100%;
+    height: 1050px;
+}
+
+
+.v-pages-item.fyzl .v-list-item {
+    position: relative;
+    top: 80px;
+    text-align: center;
+    transition: all .4s;
+}
+.v-pages-item.fyzl .v-list-item:hover{ top: 0px}
+
+.v-pages-item.fyzl .v-list-item img {
+    width: 95%
+}
+
+/* 非遗影音 */
+.v-pages-item.fyyy {
+    padding: 150px 0 50px 0;
+    margin: 0;
+    background-image: url("../images/video_bg.png");
+    background-repeat: no-repeat;
+    background-size: 100%;
+    height: 640px;
+}
+
+/* 非遗图集 */
+.v-pages-item.fytj {
+    padding: 150px 0 50px 0;
+    margin: 0;
+    background-image: url("../images/music_bg.png");
+    background-repeat: no-repeat;
+    background-size: 100%;
+    height:910px;
+}
+.v-pages-item.fytj .v-list-item{position: relative; width: 80px;}
+.v-pages-item.fytj .v-list-item:before{content: ""; left: 20px; top: 165px; position: absolute; width: 20px; height: 20px;background-image: url("../images/flower1.svg");
+    background-repeat: no-repeat;
+    background-size: 100%;}
+.v-pages-item.fytj .v-list-item:after{content: ""; left: 30px; top: 15px; position: absolute; width: 1px; height: 150px;background: #fff}
+.v-pages-item.fytj .v-list-item .item-name{width: 30px;color: #fff; margin-right: 20px;}
+.v-pages-item.fytj .v-list-item .item-title{width: 30px;color: #fff}

pages/fyzy/index.html

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>非遗资源-中国非物质文化遗产网</title>
+    <link rel="stylesheet" href="../../assets/style/v-global.css">
+    <link rel="stylesheet" href="../../assets/style/v-layout.css">
+</head>
+<body class="bg">
+<iframe id="header" src='../header.html' width="100%" height="200" target="_self"
+        style="border: none; overflow: hidden"></iframe>
+<div class="v-bread" style="top: -40px">
+    <div class="v-contain row">
+        <div class="v-bread-item">首页</div>
+        <div class="v-bread-item">非遗资源</div>
+    </div>
+</div>
+<div class="v-pages">
+    <div class="v-pages-item fyzl">
+        <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>
+            <div class="row v-list">
+                <div class="col-6">
+                    <div class="v-list-item"><img src="../../assets/images/exhibition_picture1.png"/></div>
+                </div>
+                <div class="col-6">
+                    <div class="v-list-item"><img src="../../assets/images/exhibition_picture2.png"/></div>
+                </div>
+                <div class="col-6">
+                    <div class="v-list-item"><img src="../../assets/images/exhibition_picture3.png"/></div>
+                </div>
+                <div class="col-6">
+                    <div class="v-list-item"><img src="../../assets/images/exhibition_picture4.png"/></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="v-pages-item  fyyy">
+        <div class="v-contain">
+            <div class="v-pages-title text-center">
+                <div class="title-inner"><span class="big">影音</span></div>
+            </div>
+        </div>
+    </div>
+    <div class="v-pages-item fytj">
+        <div class="v-contain">
+            <div class="v-pages-title white text-center">
+                <div class="title-inner"><span class="big">音频</span></div>
+            </div>
+            <div class="v-list row">
+                <div class="v-list-item row col-4">
+                    <div class="item-name">《<br/>平沙落雁<br/>》</div>
+                    <div class="item-title">古琴曲目</div>
+                </div>
+                <div class="v-list-item row col-4">
+                    <div class="item-name">《<br/>平沙落雁<br/>》</div>
+                    <div class="item-title">古琴曲目</div>
+                </div>
+                <div class="v-list-item row col-4">
+                    <div class="item-name">《<br/>平沙落雁<br/>》</div>
+                    <div class="item-title">古琴曲目</div>
+                </div>
+                <div class="v-list-item row col-4">
+                    <div class="item-name">《<br/>平沙落雁<br/>》</div>
+                    <div class="item-title">古琴曲目</div>
+                </div>
+                <div class="v-list-item row col-4">
+                    <div class="item-name">《<br/>平沙落雁<br/>》</div>
+                    <div class="item-title">古琴曲目</div>
+                </div>
+                <div class="v-list-item row col-4">
+                    <div class="item-name">《<br/>平沙落雁<br/>》</div>
+                    <div class="item-title">古琴曲目</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<iframe id="footer" src='../footer.html' width="100%" height="300" target="_self"
+        style="border: none; margin-top: 0"></iframe>
+</body>
+</html>

pages/jigou/index.html

@@ -2,10 +2,21 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Title</title>
+    <title>组织机构-中国非物质文化遗产网</title>
+    <link rel="stylesheet" href="../../assets/style/v-global.css">
     <link rel="stylesheet" href="../../assets/style/v-layout.css">
 </head>
-<body>
-<div class="red"></div>
+<body class="bg">
+<iframe id="header" src='../header.html' width="100%" height="200" target="_self"
+        style="border: none; overflow: hidden"></iframe>
+<div class="v-bread">
+    <div class="v-contain row">
+        <div class="v-bread-item">首页</div>
+        <div class="v-bread-item">组织机构</div>
+    </div>
+</div>
+<div class="v-pages"></div>
+<iframe id="footer" src='../footer.html' width="100%" height="300" target="_self"
+        style="border: none"></iframe>
 </body>
 </html>