Explorar o código

style: 修改瀑布流样式

chenlei hai 1 ano
pai
achega
6bc1d1ddf5

+ 110 - 46
web/src/views/Collections/index.vue

@@ -72,14 +72,14 @@
       </ul>
       <!-- 右侧内容 -->
       <div
-        class="right"
+        class="right2"
         data-aria-viewport-area
         tabindex="0"
         aria-label
         aria-description="You've reached the tiles of ${keyword}, please use the tab key to go through the tiles."
       >
         <div
-          class="row"
+          class="row2"
           v-for="(item, index) in data"
           :key="item.id"
           @click="lookBig(item)"
@@ -300,7 +300,18 @@ export default {
         }
       }
     }
-    .right {
+    .right2 {
+      column-count: 3;
+      column-gap: 30px;
+
+      .row2 {
+        margin-bottom: 30px;
+        width: 303px !important;
+        break-inside: avoid;
+      }
+    }
+    .right,
+    .right2 {
       border-left: 1px solid #d8d8d8;
       flex: 1;
       margin-left: 10px;
@@ -310,9 +321,12 @@ export default {
         top: 10px;
         left: 10px;
         position: absolute;
+      }
+      .row,
+      .row2 {
         width: 310px;
         .rowImg {
-          width: 310px;
+          width: inherit;
           // height: 400px;
           vertical-align: middle;
         }
@@ -552,48 +566,98 @@ export default {
     }
   }
   .Calligraphies {
-    height: 2314px;
-    .row {
-      &:nth-of-type(4) {
-        left: 650px;
-        top: 367px;
-      }
-      &:nth-of-type(5) {
-        left: 10px;
-        top: 429px;
-      }
-      &:nth-of-type(6) {
-        left: 330px;
-        top: 609px;
-      }
-      &:nth-of-type(7) {
-        left: 650px;
-        top: 744px;
-      }
-      &:nth-of-type(8) {
-        left: 10px;
-        top: 808px;
-      }
-      &:nth-of-type(9) {
-        left: 650px;
-        top: 1123px;
-      }
-      &:nth-of-type(10) {
-        left: 330px;
-        top: 1228px;
-      }
-      &:nth-of-type(11) {
-        left: 10px;
-        top: 1458px;
-      }
-      &:nth-of-type(12) {
-        left: 650px;
-        top: 1779px;
-      }
-      &:nth-of-type(13) {
-        left: 330px;
-        top: 1807px;
-      }
+    height: 9000px;
+    .row2 {
+      // &:nth-of-type(4) {
+      //   left: 650px;
+      //   top: 367px;
+      // }
+      // &:nth-of-type(5) {
+      //   left: 10px;
+      //   top: 429px;
+      // }
+      // &:nth-of-type(6) {
+      //   left: 330px;
+      //   top: 609px;
+      // }
+      // &:nth-of-type(7) {
+      //   left: 650px;
+      //   top: 744px;
+      // }
+      // &:nth-of-type(8) {
+      //   left: 10px;
+      //   top: 808px;
+      // }
+      // &:nth-of-type(9) {
+      //   left: 650px;
+      //   top: 1123px;
+      // }
+      // &:nth-of-type(10) {
+      //   left: 330px;
+      //   top: 1228px;
+      // }
+      // &:nth-of-type(11) {
+      //   left: 10px;
+      //   top: 1458px;
+      // }
+      // &:nth-of-type(12) {
+      //   left: 650px;
+      //   top: 1779px;
+      // }
+      // &:nth-of-type(13) {
+      //   left: 330px;
+      //   top: 1807px;
+      // }
+      // &:nth-of-type(14) {
+      //   left: 10px;
+      //   top: 2055px;
+      // }
+      // &:nth-of-type(15) {
+      //   left: 330px;
+      //   top: 2323px;
+      // }
+      // &:nth-of-type(16) {
+      //   left: 650px;
+      //   top: 2319px;
+      // }
+      // &:nth-of-type(17) {
+      //   top: 2838px;
+      // }
+      // &:nth-of-type(18) {
+      //   left: 330px;
+      //   top: 3532px;
+      // }
+      // &:nth-of-type(19) {
+      //   left: 650px;
+      //   top: 2688px;
+      // }
+      // &:nth-of-type(20) {
+      //   top: 3357px;
+      // }
+      // &:nth-of-type(21) {
+      //   left: 650px;
+      //   top: 2934px;
+      // }
+      // &:nth-of-type(22) {
+      //   left: 10px;
+      //   top: 3652px;
+      // }
+      // &:nth-of-type(23) {
+      //   left: 330px;
+      //   top: 3785px;
+      // }
+      // &:nth-of-type(24) {
+      //   left: 650px;
+      //   top: 3650px;
+      // }
+      // &:nth-of-type(25) {
+      //   left: 330px;
+      //   top: 4030px;
+      // }
+      // &:nth-of-type(26) {
+      //   left: 650px;
+      //   top: 3930px;
+      // }
     }
   }
   .Paintings {

A diferenza do arquivo foi suprimida porque é demasiado grande
+ 365 - 0
web/src/views/Search/data.js


A diferenza do arquivo foi suprimida porque é demasiado grande
+ 365 - 0
web/src/views/Search/dataAll.js


A diferenza do arquivo foi suprimida porque é demasiado grande
+ 330 - 0
web/src/views/dataAll.js


A diferenza do arquivo foi suprimida porque é demasiado grande
+ 330 - 0
webM/src/views/Collections/data.js


A diferenza do arquivo foi suprimida porque é demasiado grande
+ 400 - 0
webM/src/views/Search/data.js


+ 280 - 0
webM/src/views/Search/dataAll.js

@@ -942,6 +942,286 @@ export const dataAll = [
     path: "#/Layout/CollectionsDetail?id=13&k=Calligraphies",
   },
   {
+    id: 14,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=14&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/14.png",
+    h3: 'A Scroll of Riverside in Late Autumn Imitating Wen Tong by Wang Hui (Qing Dynasty)',
+    p: 'Adopting the composition of scenery of both sides of the same river, this painting depicts a miniaturized view of the riverside in the late autumn. ',
+  },
+  {
+    id: 15,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=15&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/15.png",
+    h3: 'Bamboo and Stone on Scroll by Yao Shou (Ming Dynasty)',
+    p: 'This painting of bamboo and rocks is beautifully stylized with ink brush strokes. A simple composition incorporates poetry, calligraphy, and painting, making it extremely literati-like. ',
+  },
+  {
+    id: 16,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=16&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/16.png",
+    h3: 'A Fan Leaf of A Fisherman by Cui Zizhong (Ming Dynasty)',
+    p: 'Cui Zizhong (1594-1644) was a painter of Ming Dynasty, a local Beihai (now Laiyang city, Shandong Province). ',
+  },
+  {
+    id: 17,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=17&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/17.png",
+    h3: 'Album Leaf of A Long Inscription on A Stone Wall by Xie Bin (Qing Dynasty)',
+    p: 'Xie Bin (1601-1681) a native of Shangyu (now in Zhejiang Province). After, he migrates to Qiantang (now Hangzhou City) with his father. ',
+  },
+  {
+    id: 18,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=18&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/18.png",
+    h3: 'Ink Plum Blossom Painting on Scroll by Hu Zongyun (Ming Dynasty)',
+    p: 'Hu Zongyun was a native of Yuzhang village in Yongjia and a decedent of Hu Xiang. He was good at painting and calligraphy.',
+  },
+  {
+    id: 19,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=19&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/19.png",
+    h3: 'Scroll of Landscape Imitating Ni Zan’s Work by Shen Zhou (Ming Dynasty)',
+    p: 'Shen uses the classic and simple composition called “scenery of both sides of the same river” with a calligraphic style. As the scroll unfolds, nearshore and distant mountains are presented. ',
+  },
+  {
+    id: 20,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=20&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/20.png",
+    h3: 'Album of Landscape by Yun Shouping (Qing Dynasty)',
+    p: 'This 12-leaf album contains (in order of content) the following works: Waterside Pavilion Surrounded by Lotus in Imitation of Zhao Danian, Autumn Water with waterfowl in Imitation of Zhang Sengyao.',
+  },
+  {
+    id: 21,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=21&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/21.png",
+    h3: 'Scroll of Autumn Waves in Wuxia Gorge by Yuan Yao (Qing Dynasty)',
+    p: 'This painting depicts the scenery of the Wuxia with Gongbi(careful realist technique) ink brushwork. The mountains are majestic and have supernatural craftsmanship. ',
+  },
+  {
+    id: 22,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=22&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/22.png",
+    h3: 'Plum Blossom on Scroll by Wang Shishen (Qing Dynasty)',
+    p: 'This painting depicts the white plum, with the stem of the plum tree depicted in light ink. Thick ink was used to draw moss dots horizontally, which added a unique charm. ',
+  },
+  {
+    id: 23,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=23&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/23.png",
+    h3: "Scroll of Running Script of Rhapsody on Dengtuzi's Lechery by Dong Qichang",
+    p: "This scroll is an excerpt from Song Yu’s Rhapsody on Dengtuzi's Lechery of the Warring States period, from “having travelled far and wide at a young age” to “not need to wear makeup”. ",
+  },
+  {
+    id: 24,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=24&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/24.png",
+    h3: 'Scroll of Regular Script Entitled Inscription on Yanran Mountain by Dong Qichang (Ming Dynasty)',
+    p: 'This volume was written in regular script with 3 larger characters per line. It was a piece of work written by Dong Qichang in the process of imitating Mi Fu’s small regular post “Inscription on Yanran Mountain” by enlarging the original work of Mi Fu in small regular script. ',
+  },
+  {
+    id: 25,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=25&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/25.png",
+    h3: 'Album of Medicine Buddha Sutra Embroidered by Housemaid Chen from Xu Family of the Ming Dynasty',
+    p: 'This is a album folded album with wooden wrappers. The cover is inscribed with “Sutra of the Vows of the Healing Buddha Bhaisajya Guru”/ Sutra of the Medicine Buddha.',
+  },
+  {
+    id: 26,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=26&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/26.png",
+    h3: 'Cursive Script on Scroll by Wang Duo (Qing Dynasty)',
+    p: 'This scroll is written in running script. The signed year of 1651 indicated that Wang Duo wrote this work in his later years during a meeting with friends. ',
+  },
+  {
+    id: 27,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=27&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/27.png",
+    h3: 'A Scroll with Poem Written in Cursive Script by Zhu Da (Qing Dynasty)',
+    p: 'This scroll is written in cursive script. Although most of the characters are in cursive style, they are written with the brushwork of the seal script rather than the turning and echoing of cursive brushwork.',
+  },
+  {
+    id: 28,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=28&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/28.png",
+    h3: 'The Sutra on Impermanence in Regular Script on Scroll (Song Dynasty)',
+    p: 'This scroll is written in small regular script with the full text of Sutra on Impermanence. This is a Buddhist classic translated by the Tipitakacariya Yi Jing of the Tang Dynasty.',
+  },
+  {
+    id: 29,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=29&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/29.png",
+    h3: 'A Scroll of Poems in Cursive Script by Wang Chong (Ming Dynasty)',
+    p: 'This scroll is written in cursive script with five poems written by the calligrapher, in the order of “Temple in the Mountain”, “Bamboo Lumbering”, “Return to the Mountain in Sickness when Friends Brings Comfort with Cups Filled with Wine”, “Summer Days” and “Rain”.',
+  },
+  {
+    id: 30,
+    path: "#/Layout/CollectionsDetail?id=30&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/30.png",
+    url: 'Calligraphies',
+    h3: 'Rubbings of Thirteen Confucian Classics Made by Order of Emperor Qianlong (Qing Dynasty)',
+    p: 'The thirteen Confucian classics are the thirteen classical works of Confucianism, all of which contain 630,000 characters, including The Book of Changes, The Book of History, The Book of Songs, The Ritual of Zhou, The Book of Etiquette.',
+  },
+  {
+    id: 31,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=31&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/31.png",
+    h3: 'Rubbing of Qianfu Temple Dobao Pagoda Tablet by Yan Zhenqing (Song Dynasty)',
+    p: 'This rubbing has 21 pages of inscriptions with wooden wrappers, one inside and one outside signed label, and five postscript pages.',
+  },
+  {
+    id: 32,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=32&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/32.png",
+    h3: 'Rubbing of Postscript to Thirteen Lines of Nymph of the Luo River  by Liu Gongquan (Song Dynasty)',
+    p: 'The album has a wooden cover with brocaded wrap, with one leaf of content, one inner and one outer signed notes, and two paragraphs of postscripts.',
+  },
+  {
+    id: 33,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=33&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/33.png",
+    h3: 'Rubbing of The Monument for Huangfu Dan by Ouyang Xun (Song Dynasty)',
+    p: 'The album has a brocade cover with writings of “ Stele for Huangfu Dan (Sui Dynasty)” on it.  There are 17 folds of album leaves. ',
+  },
+  {
+    id: 34,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=34&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/34.png",
+    h3: 'Rubbing of Stele of General Li Sixun of the Tang Dynasty (Song Dynasty)',
+    p: 'With wooden cover wrapped in leather, the album has 21 pages in total. The stele inscription is followed by a postscript by Guo Shangxian in small regular script during the Jiaqing reign of the Qing Dynasty (1824).',
+  },
+  {
+    id: 35,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=35&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/35.png",
+    h3: 'Rubbing of Xiu Taigong Temple Stele of Eastern Wei Dynasty (534-550)-(Ming Dynasty)',
+    p: 'With wooden cover wrapped in leather, the album has 16 folds. On the cover, there is a signed note that reads “A monument established in the Wei Dynasty for Lv Wang, the founder of the State Qi (1046 BC—221 BC). ',
+  },
+  {
+    id: 36,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=36&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/36.png",
+    h3: 'Rubbing of Stone Inscription in Mount Tai from Qin Dynasty (Ming Dynasty)',
+    p: 'This piece is organized in the form of an album with a camphor wood cover. The main text has 29 characters in three folds. ',
+  },
+  {
+    id: 37,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=37&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/37.png",
+    h3: 'Rubbing of Qunyutang Script (fragmented) (Song Dynasty)',
+    p: 'With a wooden cover, the album has 3.5 folds. The content is the excerpt of The Thousand-Character Writing by the Buddhist monk Zhi Yong from the character “囊箱(pronounce ‘niang xiang’, literally means ‘luggage package/box’)”to the end of the part. ',
+  },
+  {
+    id: 38,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=38&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/38.png",
+    h3: 'Rubbing of Concubine Dong’s Epitaph of the Sui Dynasty (Qing Dynasty)',
+    p: 'The epitaph rubbing is a whole sheet of paper in regular script, with a total of 441 characters inscribed with a total of six seals. ',
+  },
+  {
+    id: 39,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=39&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/39.png",
+    h3: 'Rubbing of Diao Zun’s Epitaph from the Wei Dynasty (Qing Dynasty)',
+    p: 'It is an album with wooden cover and a total of 9.5 open pages of inscriptions. Inside the album are signed notes of scholars and artists like Wang Chonglie (1870 - 1919, professional in study of Confucian classics, epigraphy and critical interpretation of ancient texts)',
+  },
+  {
+    id: 40,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=40&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/40.png",
+    h3: 'Rubbing of Zhang Menglong Stele from the Northern Wei Dynasty (Ming Dynasty)',
+    p: 'With a brocade cover, the album has 21 folds, with 945 characters remaining. The first fold is a ink and colored painting of visiting the stele conducted by Liuguo Pavilion by Xu Xi (mainly active during the Republic of China Period, a fine connoisseur, good at painting landscapes)',
+  },
+  {
+    id: 41,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=41&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/41.png",
+    h3: 'Rubbing of Lanting Xu (Preface to the Orchid Pavilion) (Song Dynasty)',
+    p: 'The album has a brocade cover. The text of the rubbing was copied in three folds in running script with a total of twenty-eight lines. Each line has eleven, twelve or thirteen characters.',
+  },
+  {
+    id: 42,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=42&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/42.png",
+    h3: 'Rubbing of The Thousand-Character Writing by Monk Zhi Yong (Southern Song Dynasty)',
+    p: 'It is a brocade-covered album with twenty-five folds of the text in both regular script and cursive script. Later, some of its owners added folds of colophons and interpretations at the end of the album',
+  },
+  {
+    id: 43,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=43&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/43.png",
+    h3: 'Rubbing of Yi Ying Stele (Ming Dynasty)',
+    p: 'With a wooden cover, it is mounted as an album with 20 leaves of inscriptions and 513 characters. ',
+  },
+  {
+    id: 44,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=44&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/44.png",
+    h3: 'Scroll of Preface to the Collection of Landscape Poems at Rucijiangshan Pavilion by the Masters of Yuan and Ming Dynasties',
+    p: 'The scroll is titled with Zheng Yi’s (Director of the Board of Rites in the Ming Dynasty) writing “Rucijiangshan Pavilion” in seal script.',
+  },
+  {
+    id: 45,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=45&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/45.png",
+    h3: 'Fan Leaf of a Gibbon by Wang Yimin (Song Dynasty)',
+    p: 'Wang Yimin, whose life history is unknown, was born in the Northern Song Dynasty. He was a monk at first and was a native of Yongkang (now the east area of Gouxian County, Sichuan Province). ',
+  },
+  {
+    id: 46,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=46&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/46.png",
+    h3: 'Running Script of Yuan Gu Script by Zhao Mengfu (Yuan Dynasty)',
+    p: 'It was once mentioned that there are seven extant pieces of Zhao Mengfu’s handwritten scripts. Among them, five were collected by a Qing Dynasty poet named Song Luo, one was collected by Wang Shizhen from Ming Dynasty',
+  },
+  {
+    id: 47,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=47&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/47.png",
+    h3: 'The Wonderful Dharma Lotus Flower Sutra, Volume Five by Zhao Mengfu (Yuan Dynasty)',
+    p: 'This scroll is named The Mahayana Sutra-The Lotus of The True Law, Volume 5 written in small regular script, with a total of 521 lines and 22 characters in a full line',
+  },
+  {
+    id: 48,
+    url: 'Calligraphies',
+    path: "#/Layout/CollectionsDetail?id=48&k=Calligraphies",
+    cover: "/data/Collections/Calligraphies/48.png",
+    h3: 'Scroll of Landscape with Banana Tree by Qi Baishi (Republic of China Period)',
+    p: 'Qi Baishi (1864-1957) was a native from Xiangtan, Hunan Province. He excelled in painting flowers, birds, insects and fish, as well as landscapes and figures with his unique styles.',
+  },
+  {
     id: 1,
     url: "Paintings",
     cover: "/data/Collections/Paintings/1.png",