index.vue 35 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204
  1. <template>
  2. <section class="container">
  3. <!-- banner -->
  4. <div id="common-banner">
  5. <div class="common-banner-container">
  6. <div class="common-banner-img">
  7. <img src="~/assets/images/brand/brand_banner.png">
  8. </div>
  9. </div>
  10. </div>
  11. <!-- banner -->
  12. <!-- brand story -->
  13. <div id="brand-story">
  14. <div class="story-content">
  15. <div class="story-content-top">
  16. <div class="story-content-top-titleC">
  17. <h2>品牌故事</h2>
  18. </div>
  19. <div class="story-content-top-titleE">Brand Story</div>
  20. <div class="story-content-top-description">爱,一个梦想,一生一世一个家</div>
  21. </div>
  22. <div class="story-content-box">
  23. <div class="story-margaret">
  24. <div class="story-margaret-left">
  25. <img src="~/assets/images/brand/story-margaret.jpg">
  26. </div>
  27. <div class="story-margaret-right">
  28. <div class="story-margaret-titleC">
  29. <p>我生怕辜负</p>
  30. <p>这个时代</p>
  31. </div>
  32. <div
  33. class="story-margaret-titleE"
  34. >“这是最好的时代,也是最坏的时代”,100年前英国文学家狄更斯这样描述工业革命发生后的时代。如今时代又何尝不是如此呢?阶级被打破,边界在打破,跨界与创新,互联网让世界变得更加平等,每个人都有自己追求梦想的机会,以及成功的可能性。</div>
  35. <div class="story-margaret-add">+</div>
  36. </div>
  37. </div>
  38. <div class="story-margaret-intro">
  39. <div class="story-margaret-intro-left">
  40. <h3>缘起:执念美学</h3>
  41. <p>我从小喜欢画画,热爱美术、设计,对一切有美感和艺术感的东西很敏锐。开一个属于自己的设计工作室,曾是我最大的梦想,创业想过很多方向,投身家具行业纯属偶然。坦白讲,一开始我对传统实业并没有什么认知,对家具行业并没有太远大的理想,家里装修,出于好奇,发现家具也可以在网上购买,而且品质很好。</p>
  42. <p>抱着对互联网电商的好奇,尝试新生事物的态度,与互联网接轨,加上因为热爱设计和美学,便想着将自己对生活的美学理解,设计理念,融入到家具当中。12年前,就是在这样的大时代背景下,在互联网电商风口上,我一手创建“田田家园公司”,2008年又打造旗下的“VISNEY”品牌。</p>
  43. <h3>变革:不忘初心</h3>
  44. <p>“生存下去”,这是任何初创公司的铁律,可是别人做家具,我们也做家具,别人促销,我们也促销,别人建工厂,我们也建工厂……我们有什么特别的呢?这就是我们创业的要做的事情吗?这是我们的理想吗?永远在追逐别人的脚步?初心何在?无数个夜里,辗转难眠,想起自己德国留学岁月,那些夜以继日学习设计的激情,想起年少时的偶像——周总理,那句“为了中华崛起而读书”时刻激荡在我的心中,方向在哪里?一次次在现实中挣扎,一次为理想彷徨,难道不能为这个行业做点改变吗?每次迷茫的时候,不妨回到原点,我要传播的是生活的美学,而不是几件平常的家具,这些物件背后应该有思想、有灵魂、有价值。如何走高端品质,成为每个家庭生活美学顾问家,是我接下来坚定不移的路线。</p>
  45. <p>在当时,我们虽没有改变世界的能力,但是我们有让家具变得更有艺术感、更有美感的愿望。通过自身对美学、设计的理解,希望把更有美感的家具带给每个家庭。正是这样的信念促使VISNEY团队坚定“ 要做有品质高端实木家具”, 坚持正品,坚持品质,坚持品位。</p>
  46. <p>世事如棋,跌宕起伏,在低价和促销的网销平台上,一开始走的并不顺利,我们显得那么突兀,像闯进了一个陌生世界的孩子。行业低价竞争打击,部分客户不理解,甚至创业团队都表示疑惑,每天都像在荒野里孤独的行走。在那段低谷的日子,我选择了重新读书和研究设计,研究西方文化,深挖中国传统文化,在那些字里行间,在那些鲜活的人物背后,我看到了他们精彩生动的人生,我也看到了当下这个时代缺少的东西——“贵族感”和“仪式感”。我们希望传达一种生活态度,也就是我们一直坚持的品牌定位“高端实木家具,传承贵族礼仪”。我坚信“伟大源于时间,时间创造不凡”,坚定的走下去,VISNEY终被理解。</p>
  47. </div>
  48. <div class="story-margaret-intro-right">
  49. <p>不谦虚的说,我做了一个很正确的决定,随着民族品牌战略的崛起,全面的消费升级到来,新兴的中产阶层成为主力人群,移动互联网对带来的各种新思潮,人们对艺术的热爱,审美的提高,对精致生活的向往。我想轻声说句“终于等到你们,还好VISNEY没放弃”。</p>
  50. <h3>12年初心不改,再磨一把剑</h3>
  51. <p>人物与风雨在岁月里淌,层层后浪拥着前浪”,如今回首12年岁月,有相聚有别离,有荣耀有挫败,有欢笑有泪水,有太多太多的故事,站在新时代的路口,VISNEY依然秉持初心前行,我们坚持做哪些事情,我们还可以在哪些方面做的更好,是我与团队一直在思考的问题。想来想去,其实答案不早已经在【VISNEY】里面了吗?</p>
  52. <p>
  53. <strong>Value 价值</strong>为品质严于律己,为社会贡献价值。
  54. </p>
  55. <p>
  56. <strong>Innovation勇敢 创新</strong>勇于尝试,敢于创新,因勇敢而收获世界。
  57. </p>
  58. <p>
  59. <strong>Sympathy 悲悯 正义感</strong>在行业竞争中为人正派,在物欲横流中坚守良知。
  60. </p>
  61. <p>
  62. <strong>Nobility 大情怀 真温度</strong>为家庭美学而来,为行业发展奋斗,为社会责任拼搏。
  63. </p>
  64. <p>
  65. <strong>Elegance 优雅 绅士</strong>雅致着于物而美,修养发于外而贵。
  66. </p>
  67. <p>
  68. <strong>Youth 激情 年轻</strong>向着光明无畏前行,激情满溢,创意迸发。
  69. </p>
  70. <h3>小小心愿:一个家庭的高级服务管家,一个生活的居家美学顾问</h3>
  71. <p>12年的创业经历像一幕幕电影一样在我眼前晃来晃去,我常跟朋友说“我生怕辜负了这个时代”。当一切随风而逝,我们给这个世界留下什么?我们给自己的孩子留下什么?希望有一天VISNEY作为一个时代的文化符号,不仅仅是家居产品,还是家庭服务管家,生活的美学顾问。VISNEY陪伴世界一起进步,陪伴孩子一起成长。</p>
  72. </div>
  73. </div>
  74. </div>
  75. </div>
  76. </div>
  77. <!-- brand background -->
  78. <div id="brand-background">
  79. <div class="background-content">
  80. <div class="background-content-top">
  81. <div class="background-content-top-titleC">
  82. <h2>品牌背景</h2>
  83. </div>
  84. <div class="background-content-top-titleE">Brand Background</div>
  85. <div class="background-content-top-description">VISNEY卫诗理隶属深圳市卫诗理家居有限公司</div>
  86. </div>
  87. <div class="background-content-box">
  88. <ul>
  89. <li class="background-list">
  90. <div class="background-list-title">
  91. <p>卫诗理隶属于深圳市卫诗理家居有限公司</p>
  92. </div>
  93. <div class="bg-list-intro">
  94. <p>深圳市卫诗理家居有限公司是肯创集团旗下集家具、家居、设计、软装及全屋定制于一体的子公司</p>
  95. </div>
  96. </li>
  97. <li class="background-list">
  98. <div class="background-list-title">
  99. <p>卫诗理 — 中国高端家居O2O新零售模式先行者</p>
  100. </div>
  101. <div class="bg-list-intro">
  102. <p>在深圳、东莞、成都、杭州、南京、大同、包头、均设有办公机构及O2O线下体验生活馆。</p>
  103. </div>
  104. </li>
  105. <li class="background-list">
  106. <div class="background-list-title">
  107. <p>主营高端欧美实木家具,已有20年历史</p>
  108. </div>
  109. <div class="bg-list-intro">
  110. <p>入驻天猫以来,连续8年高端欧美家具销量领跑,与玛莎拉蒂、雅诗兰黛、SK-II等七大奢侈品牌同为天猫 APASS 指定合作伙伴,是天猫APASS唯一指定合作家具品牌</p>
  111. </div>
  112. </li>
  113. </ul>
  114. </div>
  115. </div>
  116. </div>
  117. <!-- 发展历程部分 -->
  118. <div id="brand-development">
  119. <div class="development-content">
  120. <div class="development-content-top">
  121. <div class="development-content-top-titleC">
  122. <h2>发展历程</h2>
  123. </div>
  124. <div class="development-content-top-titleE">Development Process</div>
  125. <div class="development-content-top-description">将在全国范围内落地365家线下体验馆</div>
  126. </div>
  127. <div class="development-content-box">
  128. <div class="development-content-img">
  129. <img src="~/assets/images/brand/development-img.png">
  130. </div>
  131. <div class="development-process">
  132. <ul>
  133. <li class="development-list clearfix">
  134. <div class="development-time">
  135. <p>2006</p>
  136. </div>
  137. <div class="development-intro">
  138. <p>佛山市田田家园家具有限公司成立</p>
  139. <p>田田家园淘宝店铺正式上线,为用户提供欧美风格系列家具</p>
  140. </div>
  141. </li>
  142. <li class="development-list clearfix">
  143. <div class="development-intro">
  144. <p>公司拓展高端欧美实木家具产品线,VISNEY卫诗理品牌诞生</p>
  145. </div>
  146. <div class="development-time">
  147. <p>2008</p>
  148. </div>
  149. </li>
  150. <li class="development-list clearfix">
  151. <div class="development-time">
  152. <p>2011</p>
  153. </div>
  154. <div class="development-intro">
  155. <p>卫诗理签约广州、深圳资深家具设计团队,开发10余个新系列产品</p>
  156. <p>卫诗理特聘意大利、法国多名艺术设计师,全方位增强产品的欧美风情</p>
  157. <p>进行第一季万里真情回访活动,真实聆听客户声音</p>
  158. </div>
  159. </li>
  160. <li class="development-list clearfix">
  161. <div class="development-intro">
  162. <p>举办首届国际家具互联网营销峰会,推动行业共同进步</p>
  163. <p>卫诗理启动线下体验馆项目,为用户提供更多购物保障</p>
  164. <p>进行第四季万里真情回访活动,走访四座城市</p>
  165. </div>
  166. <div class="development-time">
  167. <p>2014</p>
  168. </div>
  169. </li>
  170. <li class="development-list clearfix">
  171. <div class="development-time">
  172. <p>2015</p>
  173. </div>
  174. <div class="development-intro">
  175. <p>卫诗理开启双线并行模式,全面进行线下体验店开设,让用户更好的进行产品体验</p>
  176. <p>进行第五季万里真情回访活动,走访5座城市</p>
  177. <p>卫诗理首家体验馆在广东东莞落成</p>
  178. <p>卫诗理品牌研发高端产品线,国际馆开张</p>
  179. </div>
  180. </li>
  181. <li class="development-list clearfix">
  182. <div class="development-intro">
  183. <p>卫诗理与玛莎拉蒂、雅诗兰黛、SKII等奢侈品牌被选为天猫高级会员系统八大指定合作品牌,并且是唯一指定家具合作品牌</p>
  184. <p>第六季万里真情回访活动,走访6座城市</p>
  185. <p>成为2016年度“名品百亿”俱乐部会员企业</p>
  186. </div>
  187. <div class="development-time">
  188. <p>2016</p>
  189. </div>
  190. </li>
  191. <li class="development-list clearfix">
  192. <div class="development-time">
  193. <p>2017</p>
  194. </div>
  195. <div class="development-intro">
  196. <p>体验馆全面升级,新零售Olivelife生态生活体验馆项目启动</p>
  197. <p>第七季万里真情回访联合中国绿化基金会,助力百万森林公益植树项目</p>
  198. <p>卫诗理南京体验店正式开业</p>
  199. <p>卫诗理成都体验馆正式开业,赵雅芝亲临现场</p>
  200. <p>卫诗理应邀参加第四十届中国(上海)国际家具博览会</p>
  201. </div>
  202. </li>
  203. <li class="development-list clearfix">
  204. <div class="development-intro">
  205. <p>卫诗理内蒙古包头体验馆开幕</p>
  206. <p>第八季万里真情回访活动,走访5座城市</p>
  207. <p>卫诗理定制部、智能家居部成立,为用户提供更便捷的购物体验</p>
  208. <p>杭州、武汉旗舰体验馆即将开业</p>
  209. </div>
  210. <div class="development-time">
  211. <p>2018</p>
  212. </div>
  213. </li>
  214. </ul>
  215. <div class="development-timelines"></div>
  216. </div>
  217. <div class="development-fauture">
  218. <div class="development-fauture-title">
  219. <p class="fauture-title">未来三年</p>
  220. <p class="fauture-title-intro">卫诗理将在全国范围内落地365家线下体验馆</p>
  221. </div>
  222. <div class="development-fauture-intro">
  223. <p>其中,有18家为门店面积超2000平的品牌直营生态生活体验馆。</p>
  224. <p>杭州以4200㎡旗舰体验馆盛大开业、武汉将以5100㎡超大型生态生活体验馆荣耀开业。</p>
  225. <br>
  226. <p>体验馆以花艺、自然景观、纯正欧式软装、极具地方特色的美食以及别具匠心的空间格局布置为途径打造有温度的生态生活</p>
  227. <p>美学,让体验馆成为供卫诗理客人居住的生态空间。</p>
  228. </div>
  229. </div>
  230. </div>
  231. </div>
  232. </div>
  233. <!-- 发展历程部分结束 -->
  234. <!-- 品牌理念部分 -->
  235. <div id="brand-concept">
  236. <div class="concept-content">
  237. <div class="concept-content-top">
  238. <div class="concept-content-top-titleC">
  239. <h2>品牌宗旨</h2>
  240. </div>
  241. <div class="concept-content-top-titleE">Brand purpose</div>
  242. <div class="concept-content-top-description">以家庭为单位、一孩子为主体</div>
  243. </div>
  244. <div class="concept-content-box">
  245. <div class="concept-intro">
  246. <div class="concept-intro-left">
  247. <img src="~/assets/images/brand/concept-intro.png">
  248. </div>
  249. <div class="concept-intro-right">
  250. <div class="concept-intro-title">“以家庭为单位、以孩子为主体”</div>
  251. <div class="concept-intro-content">
  252. <p>全方位为全球家庭提供高雅、高品位、轻奢、绿色、健康、舒适的理想居家环境,为中高端客户提供高端服务和整体家空间的打造:包括软装、硬装、全屋定制、家具定制、园林、花艺、高端礼服定制、婚宴、生日、庆典、现场布置等一体化家居服务。</p>
  253. </div>
  254. </div>
  255. </div>
  256. <div class="concept-details">
  257. <div class="concept-details-left">
  258. <div class="brand-slogan">
  259. <p class="brand-concept-title">品牌口号</p>
  260. <p class="brand-concept-desc">生活多点仪式感!</p>
  261. </div>
  262. <div class="brand-slogan">
  263. <p class="brand-concept-title">品牌定位</p>
  264. <p class="brand-concept-desc">一个家庭的高级服务管家,一个生活的居家美学顾问</p>
  265. </div>
  266. <div class="brand-slogan">
  267. <p class="brand-concept-title">品牌使命</p>
  268. <p class="brand-concept-desc">通过美学教育和生活礼仪,让孩子获得更美好的未来</p>
  269. </div>
  270. <div class="brand-slogan">
  271. <p class="brand-concept-title">品牌愿景</p>
  272. <p class="brand-concept-desc">打造家居+生活一站式服务平台</p>
  273. </div>
  274. </div>
  275. <div class="concept-details-right">
  276. <div class="concept-details-video">
  277. <indexVideo></indexVideo>
  278. </div>
  279. </div>
  280. </div>
  281. </div>
  282. </div>
  283. </div>
  284. <!-- 品牌理念部分结束 -->
  285. <!-- 品牌实力部分 -->
  286. <div id="brand-strength">
  287. <div class="strength-content">
  288. <div class="strength-content-first">
  289. <div class="strength-content-left">
  290. <img src="~/assets/images/brand/strength-content.png">
  291. </div>
  292. <div class="strength-content-right">
  293. <div class="strength-content-titleC">
  294. <h2>品牌实力</h2>
  295. </div>
  296. <div class="strength-content-titleE">
  297. <p>Has a strong product supply chain as well as furniture,</p>
  298. <p>soft and powerful original design capabilities</p>
  299. </div>
  300. <div class="strength-content-description">连续八年天猫高端欧美实木家具销量第一</div>
  301. <div class="strength-content-intro">
  302. <p>2017年双十一当天成交1.3168亿,在天猫整体家具类目排名TOP8,客单价高达2 . 9万,线下门店客单价高达7. 2万,相当于行业均值的7 . 6倍,单笔最高成交金额115万</p>
  303. <br>
  304. <br>
  305. <p>2017年双十一当天访客数高达18.76万,浏览量为110.2万,日均浏览量 客户群体以新崛起的中产阶级为首</p>
  306. <br>
  307. <br>
  308. <p>阿里巴巴天猫APASS(黑卡用户)八大合作品牌唯一指定合作家具品牌</p>
  309. <br>
  310. <br>
  311. <p>拥有大美、小美、简美、英式、法式、意式、新古典、新中式、原创系列、奢华高端定制等58个系列产品、共8600件单品。</p>
  312. <br>
  313. <br>
  314. <p>拥有强大产品供应链以及家具软装强大原创设计能力</p>
  315. </div>
  316. </div>
  317. </div>
  318. <div class="strength-content-box">
  319. <ul>
  320. <li>
  321. <div class="strength-main">
  322. <div class="strength-main-img strength-main-imgcd"></div>
  323. <div class="strength-main-title">
  324. <p>2017年8月18日</p>
  325. <p>卫诗理 成都</p>
  326. </div>
  327. </div>
  328. </li>
  329. <li>
  330. <div class="strength-main">
  331. <div class="strength-main-img strength-main-imgnj"></div>
  332. <div class="strength-main-title">
  333. <p>2017年1月1日</p>
  334. <p>卫诗理 南京</p>
  335. </div>
  336. </div>
  337. </li>
  338. <li>
  339. <div class="strength-main">
  340. <div class="strength-main-img strength-main-imgdg"></div>
  341. <div class="strength-main-title">
  342. <p>2015年9月26日</p>
  343. <p>卫诗理 东莞</p>
  344. </div>
  345. </div>
  346. </li>
  347. </ul>
  348. </div>
  349. </div>
  350. </div>
  351. <!-- 品牌实力部分结束 -->
  352. </section>
  353. </template>
  354. <script>
  355. import axios from "axios";
  356. import indexVideo from "~/components/home/indexVideo";
  357. export default {
  358. data() {
  359. return {};
  360. },
  361. components: {
  362. indexVideo,
  363. },
  364. head() {
  365. return {
  366. title: this.metaData.navigationTitle,
  367. meta: [
  368. {
  369. name: "keywords",
  370. hid: "keywords",
  371. content: `${this.metaData.navigationKeyword}`,
  372. },
  373. {
  374. name: "description",
  375. hid: "description",
  376. content: `${this.metaData.navigationDescription}`,
  377. },
  378. ],
  379. };
  380. },
  381. async asyncData({ params, store }) {
  382. //head信息
  383. let metaData = await axios(
  384. `${store.state.wordpressAPI}/NavigationMeta/get/2`
  385. );
  386. return {
  387. metaData: metaData.data,
  388. };
  389. },
  390. };
  391. </script>
  392. <style scoped>
  393. /*banner*/
  394. #common-banner {
  395. position: relative;
  396. overflow: hidden;
  397. width: 100%;
  398. height: 600px;
  399. }
  400. .common-banner-container {
  401. position: relative;
  402. width: 1200px;
  403. height: 100%;
  404. margin: 0 auto;
  405. }
  406. .common-banner-img {
  407. position: absolute;
  408. top: 0;
  409. left: 50%;
  410. overflow: hidden;
  411. width: 1920px;
  412. height: 100%;
  413. margin-left: -960px;
  414. }
  415. /*banner*/
  416. /*brand story*/
  417. div#brand-story {
  418. width: 100%;
  419. height: auto;
  420. }
  421. .story-content {
  422. width: 1200px;
  423. height: auto;
  424. margin: 0 auto;
  425. }
  426. .story-content-top {
  427. width: 100%;
  428. height: auto;
  429. padding: 162px 0 100px;
  430. text-align: center;
  431. }
  432. .story-content-top-titleC {
  433. width: 100%;
  434. height: auto;
  435. font-size: 38px;
  436. font-family: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif",
  437. "source-han-serif-sc", "STZhongsong", "宋体", "serif";
  438. font-weight: 900;
  439. color: #22202b;
  440. line-height: 46px;
  441. }
  442. .story-content-top-titleE {
  443. width: 100%;
  444. height: auto;
  445. font-size: 14px;
  446. color: #858585;
  447. line-height: 22px;
  448. }
  449. .story-content-top-description {
  450. width: 100%;
  451. height: auto;
  452. font-size: 14px;
  453. color: #858585;
  454. line-height: 22px;
  455. }
  456. .story-content-box {
  457. overflow: hidden;
  458. width: 100%;
  459. height: auto;
  460. padding-bottom: 90px;
  461. }
  462. .story-margaret {
  463. overflow: hidden;
  464. width: 100%;
  465. }
  466. .story-margaret-left {
  467. float: left;
  468. width: 661px;
  469. height: 370px;
  470. }
  471. .story-margaret-left img {
  472. width: 100%;
  473. height: 100%;
  474. }
  475. .story-margaret-right {
  476. float: right;
  477. width: 340px;
  478. height: 370px;
  479. border-bottom: 2px solid #d5d5d8;
  480. }
  481. .story-margaret-titleC {
  482. width: 100%;
  483. height: auto;
  484. color: #22202b;
  485. font-size: 22px;
  486. font-weight: bold;
  487. line-height: 28px;
  488. text-align: right;
  489. }
  490. .story-margaret-titleE {
  491. overflow: hidden;
  492. width: 100%;
  493. height: auto;
  494. padding: 5px 0 15px;
  495. color: #ccc;
  496. font-size: 12px;
  497. line-height: 18px;
  498. text-align: right;
  499. }
  500. .story-margaret-add {
  501. width: 100%;
  502. height: auto;
  503. padding-top: 70px;
  504. color: #000;
  505. font-size: 36px;
  506. font-weight: bolder;
  507. text-align: right;
  508. }
  509. .story-margaret-intro {
  510. overflow: hidden;
  511. width: 100%;
  512. height: auto;
  513. padding: 77px 0 60px;
  514. color: #858585;
  515. font-size: 14px;
  516. line-height: 22px;
  517. text-align: left;
  518. }
  519. .story-margaret-intro-left {
  520. float: left;
  521. width: 600px;
  522. height: auto;
  523. padding-right: 60px;
  524. box-sizing: border-box;
  525. }
  526. .story-margaret-intro-right {
  527. float: right;
  528. width: 600px;
  529. height: auto;
  530. padding-left: 60px;
  531. box-sizing: border-box;
  532. }
  533. .story-margaret-intro p {
  534. padding-top: 24px;
  535. }
  536. .story-margaret-intro h3 {
  537. padding-top: 24px;
  538. color: #22202b;
  539. }
  540. /*brand story*/
  541. /*brand background*/
  542. div#brand-background {
  543. width: 100%;
  544. height: auto;
  545. background: #f9f9fa;
  546. }
  547. .background-content {
  548. width: 1200px;
  549. height: auto;
  550. margin: 0 auto;
  551. }
  552. .background-content-top {
  553. width: 100%;
  554. height: auto;
  555. padding: 162px 0 100px;
  556. text-align: center;
  557. }
  558. .background-content-top-titleC {
  559. width: 100%;
  560. height: auto;
  561. font-size: 38px;
  562. font-family: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif",
  563. "source-han-serif-sc", "STZhongsong", "宋体", "serif";
  564. font-weight: 900;
  565. color: #22202b;
  566. line-height: 46px;
  567. }
  568. .background-content-top-titleE {
  569. width: 100%;
  570. height: auto;
  571. font-size: 14px;
  572. color: #858585;
  573. line-height: 22px;
  574. }
  575. .background-content-top-description {
  576. width: 100%;
  577. height: auto;
  578. font-size: 14px;
  579. color: #858585;
  580. line-height: 22px;
  581. }
  582. .background-content-box {
  583. overflow: hidden;
  584. width: 100%;
  585. height: auto;
  586. padding-bottom: 170px;
  587. }
  588. .background-content-box ul {
  589. overflow: hidden;
  590. width: 100%;
  591. }
  592. li.background-list {
  593. float: left;
  594. overflow: hidden;
  595. width: 400px;
  596. height: auto;
  597. box-sizing: border-box;
  598. }
  599. .background-content-box ul li:last-child {
  600. padding-left: 50px;
  601. }
  602. .background-list-title {
  603. overflow: hidden;
  604. width: 100%;
  605. height: 48px;
  606. color: #6d6d6d;
  607. font-size: 18px;
  608. font-weight: bold;
  609. text-align: left;
  610. line-height: 48px;
  611. }
  612. .background-list-title p {
  613. overflow: hidden;
  614. width: 100%;
  615. height: 100%;
  616. text-overflow: ellipsis;
  617. white-space: nowrap;
  618. }
  619. .bg-list-intro {
  620. overflow: hidden;
  621. width: 300px;
  622. height: auto;
  623. padding: 35px 0 50px;
  624. color: #858585;
  625. font-size: 14px;
  626. line-height: 20px;
  627. text-align: left;
  628. }
  629. /*brand background*/
  630. /*发展历程部分*/
  631. div#brand-development {
  632. width: 100%;
  633. height: auto;
  634. }
  635. .development-content {
  636. width: 1200px;
  637. height: auto;
  638. margin: 0 auto;
  639. }
  640. .development-content-top {
  641. width: 100%;
  642. height: auto;
  643. padding: 162px 0 100px;
  644. text-align: center;
  645. }
  646. .development-content-top-titleC {
  647. width: 100%;
  648. height: auto;
  649. font-size: 38px;
  650. font-family: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif",
  651. "source-han-serif-sc", "STZhongsong", "宋体", "serif";
  652. font-weight: 900;
  653. color: #22202b;
  654. line-height: 46px;
  655. }
  656. .development-content-top-titleE {
  657. width: 100%;
  658. height: auto;
  659. font-size: 14px;
  660. color: #858585;
  661. line-height: 22px;
  662. }
  663. .development-content-top-description {
  664. width: 100%;
  665. height: auto;
  666. font-size: 14px;
  667. color: #858585;
  668. line-height: 22px;
  669. }
  670. .development-content-box {
  671. overflow: hidden;
  672. width: 100%;
  673. height: auto;
  674. padding-bottom: 120px;
  675. }
  676. .development-content-img {
  677. overflow: hidden;
  678. width: 461px;
  679. height: 225px;
  680. margin: 0 auto 25px;
  681. }
  682. .development-content-img img {
  683. width: 100%;
  684. height: 100%;
  685. }
  686. .development-process {
  687. position: relative;
  688. overflow: hidden;
  689. width: 100%;
  690. height: auto;
  691. padding: 75px 0 120px;
  692. }
  693. .development-process ul {
  694. overflow: hidden;
  695. width: 100%;
  696. }
  697. .development-list {
  698. position: relative;
  699. display: flex;
  700. overflow: hidden;
  701. width: 612px;
  702. align-items: center;
  703. }
  704. .development-process ul li:nth-child(2n + 1) {
  705. float: right;
  706. }
  707. .development-process ul li:nth-child(2n + 1)::before {
  708. position: absolute;
  709. top: 50%;
  710. left: 0;
  711. content: "";
  712. width: 6px;
  713. height: 40px;
  714. margin-top: -20px;
  715. background: #000;
  716. z-index: 66;
  717. }
  718. .development-process ul li:nth-child(2n) {
  719. float: left;
  720. }
  721. .development-process ul li:nth-child(2n)::before {
  722. position: absolute;
  723. top: 50%;
  724. right: 18px;
  725. content: "";
  726. width: 6px;
  727. height: 40px;
  728. margin-top: -20px;
  729. background: #000;
  730. z-index: 66;
  731. }
  732. .development-time {
  733. width: 160px;
  734. color: #22202b;
  735. font-size: 22px;
  736. font-weight: bold;
  737. text-align: center;
  738. }
  739. .development-intro {
  740. overflow: hidden;
  741. width: 440px;
  742. color: #858585;
  743. font-size: 14px;
  744. line-height: 22px;
  745. text-align: left;
  746. }
  747. .development-process ul li:nth-child(2) {
  748. margin-top: 40px;
  749. }
  750. .development-process ul li:nth-child(3) {
  751. margin-top: 60px;
  752. }
  753. .development-process ul li:nth-child(4) {
  754. margin-top: 60px;
  755. }
  756. /* .development-process ul li:nth-child(3),.development-process ul li:nth-child(4) {
  757. margin-top: 15px;
  758. } */
  759. .development-process ul li:nth-child(5) {
  760. margin-top: 37px;
  761. }
  762. .development-process ul li:nth-child(6) {
  763. margin-top: 40px;
  764. }
  765. /* .development-process ul li:nth-child(3) p:nth-child(4),.development-process ul li:nth-child(4) p:nth-child(2) {
  766. margin-top: 20px;
  767. } */
  768. .development-fauture {
  769. width: 100%;
  770. height: auto;
  771. }
  772. .development-fauture-title {
  773. width: 100%;
  774. height: auto;
  775. text-align: center;
  776. }
  777. p.fauture-title {
  778. width: 100%;
  779. height: auto;
  780. color: #22202b;
  781. font-size: 22px;
  782. font-weight: bold;
  783. line-height: 44px;
  784. }
  785. p.fauture-title-intro {
  786. width: 100%;
  787. height: auto;
  788. color: #22202b;
  789. font-size: 18px;
  790. line-height: 34px;
  791. }
  792. .development-fauture-intro {
  793. overflow: hidden;
  794. width: 780px;
  795. margin: 0 auto;
  796. padding-top: 85px;
  797. color: #858585;
  798. font-size: 14px;
  799. line-height: 22px;
  800. }
  801. .development-timelines {
  802. position: absolute;
  803. top: 0;
  804. left: 49.3%;
  805. width: 1px;
  806. height: 1095px;
  807. background: #eee;
  808. z-index: -1;
  809. }
  810. /*发展历程部分结束*/
  811. /*品牌理念部分*/
  812. div#brand-concept {
  813. width: 100%;
  814. height: auto;
  815. background: #f9f9fa;
  816. }
  817. .concept-content {
  818. width: 1200px;
  819. height: auto;
  820. margin: 0 auto;
  821. }
  822. .concept-content-top {
  823. width: 100%;
  824. height: auto;
  825. padding: 162px 0 100px;
  826. text-align: center;
  827. }
  828. .concept-content-top-titleC {
  829. width: 100%;
  830. height: auto;
  831. font-size: 38px;
  832. font-family: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif",
  833. "source-han-serif-sc", "STZhongsong", "宋体", "serif";
  834. font-weight: 900;
  835. color: #22202b;
  836. line-height: 46px;
  837. }
  838. .concept-content-top-titleE {
  839. width: 100%;
  840. height: auto;
  841. font-size: 14px;
  842. color: #858585;
  843. line-height: 22px;
  844. }
  845. .concept-content-top-description {
  846. width: 100%;
  847. height: auto;
  848. font-size: 14px;
  849. color: #858585;
  850. line-height: 22px;
  851. }
  852. .concept-content-box {
  853. overflow: hidden;
  854. width: 100%;
  855. height: auto;
  856. padding-bottom: 160px;
  857. }
  858. .concept-intro {
  859. overflow: hidden;
  860. width: 100%;
  861. height: auto;
  862. }
  863. .concept-intro-left {
  864. float: left;
  865. overflow: hidden;
  866. width: 461px;
  867. height: 225px;
  868. }
  869. .concept-intro-left img {
  870. width: 100%;
  871. height: 100%;
  872. }
  873. .concept-intro-right {
  874. float: right;
  875. width: 650px;
  876. height: auto;
  877. }
  878. .concept-intro-title {
  879. overflow: hidden;
  880. width: 100%;
  881. height: 58px;
  882. color: #22202b;
  883. font-size: 22px;
  884. font-weight: bold;
  885. line-height: 58px;
  886. text-align: left;
  887. text-overflow: ellipsis;
  888. white-space: nowrap;
  889. }
  890. .concept-intro-content {
  891. overflow: hidden;
  892. width: 100%;
  893. height: auto;
  894. padding-top: 22px;
  895. color: #858585;
  896. font-size: 14px;
  897. line-height: 20px;
  898. text-align: left;
  899. }
  900. .concept-details {
  901. overflow: hidden;
  902. width: 100%;
  903. height: auto;
  904. padding-top: 145px;
  905. }
  906. .concept-details-left {
  907. float: left;
  908. width: 550px;
  909. height: auto;
  910. }
  911. .concept-details-right {
  912. float: right;
  913. width: 648px;
  914. height: 356px;
  915. }
  916. .concept-details-video {
  917. overflow: hidden;
  918. width: 100%;
  919. height: 100%;
  920. background-color: #000;
  921. }
  922. .brand-slogan {
  923. overflow: hidden;
  924. width: 100%;
  925. height: auto;
  926. margin-top: 30px;
  927. }
  928. p.brand-concept-title {
  929. width: 100%;
  930. height: 38px;
  931. color: #6d6d6d;
  932. font-size: 22px;
  933. line-height: 28px;
  934. text-align: left;
  935. }
  936. p.brand-concept-desc {
  937. overflow: hidden;
  938. width: 100%;
  939. height: 30px;
  940. color: #858585;
  941. font-size: 14px;
  942. line-height: 30px;
  943. text-align: left;
  944. }
  945. .concept-details-left .brand-slogan:first-child {
  946. margin-top: 0;
  947. }
  948. /*品牌理念部分结束*/
  949. /*品牌实力部分*/
  950. div#brand-strength {
  951. width: 100%;
  952. height: auto;
  953. }
  954. .strength-content {
  955. width: 1200px;
  956. height: auto;
  957. margin: 0 auto;
  958. }
  959. .strength-content-first {
  960. overflow: hidden;
  961. width: 100%;
  962. height: auto;
  963. padding: 162px 0 140px;
  964. text-align: center;
  965. }
  966. .strength-content-left {
  967. float: left;
  968. overflow: hidden;
  969. width: 434px;
  970. height: 700px;
  971. }
  972. .strength-content-right {
  973. float: right;
  974. width: 600px;
  975. height: auto;
  976. padding-left: 37px;
  977. box-sizing: border-box;
  978. }
  979. .strength-content-titleC {
  980. overflow: hidden;
  981. width: 100%;
  982. height: 40px;
  983. color: #22202b;
  984. font-size: 38px;
  985. font-family: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif",
  986. "source-han-serif-sc", "STZhongsong", "宋体", "serif";
  987. font-weight: 900;
  988. line-height: 40px;
  989. text-align: left;
  990. }
  991. .strength-content-titleE {
  992. width: 100%;
  993. height: auto;
  994. margin-top: 34px;
  995. color: #6d6d6d;
  996. font-size: 14px;
  997. line-height: 16px;
  998. text-align: left;
  999. }
  1000. .strength-content-description {
  1001. overflow: hidden;
  1002. width: 100%;
  1003. height: 45px;
  1004. margin-top: 105px;
  1005. color: #22202b;
  1006. font-size: 22px;
  1007. line-height: 45px;
  1008. text-align: left;
  1009. }
  1010. .strength-content-intro {
  1011. overflow: hidden;
  1012. width: 100%;
  1013. height: auto;
  1014. margin-top: 90px;
  1015. color: #858585;
  1016. font-size: 14px;
  1017. line-height: 22px;
  1018. text-align: left;
  1019. }
  1020. .strength-content-box {
  1021. width: 100%;
  1022. height: auto;
  1023. padding-bottom: 240px;
  1024. }
  1025. .strength-content-box ul {
  1026. overflow: hidden;
  1027. width: 100%;
  1028. height: auto;
  1029. }
  1030. .strength-content-box ul li {
  1031. float: left;
  1032. width: 364px;
  1033. height: auto;
  1034. margin-left: 54px;
  1035. }
  1036. .strength-content-box ul li:first-child {
  1037. margin-left: 0px;
  1038. }
  1039. .strength-main {
  1040. overflow: hidden;
  1041. width: 100%;
  1042. height: 100%;
  1043. }
  1044. .strength-main-img {
  1045. cursor: pointer;
  1046. -webkit-transition: all 0.5s ease;
  1047. -o-transition: all 0.5s ease;
  1048. transition: all 0.5s ease;
  1049. }
  1050. .strength-main-imgcd {
  1051. overflow: hidden;
  1052. width: 364px;
  1053. height: 200px;
  1054. background: url("~assets/images/brand/strength-main-chengdu.png") center
  1055. center no-repeat;
  1056. }
  1057. .strength-main-imgcd:hover {
  1058. background: url("~assets/images/brand/strength-main-chengdu2.jpg") center
  1059. center no-repeat;
  1060. }
  1061. .strength-main-imgnj {
  1062. overflow: hidden;
  1063. width: 364px;
  1064. height: 200px;
  1065. background: url("~assets/images/brand/strength-main-nanjing.png") center
  1066. center no-repeat;
  1067. }
  1068. .strength-main-imgnj:hover {
  1069. background: url("~assets/images/brand/strength-main-nanjing2.jpg") center
  1070. center no-repeat;
  1071. }
  1072. .strength-main-imgdg {
  1073. overflow: hidden;
  1074. width: 364px;
  1075. height: 200px;
  1076. background: url("~assets/images/brand/strength-main-dongguan.png") center
  1077. center no-repeat;
  1078. }
  1079. .strength-main-imgdg:hover {
  1080. background: url("~assets/images/brand/strength-main-dongguan2.jpg") center
  1081. center no-repeat;
  1082. }
  1083. .strength-main-title {
  1084. overflow: hidden;
  1085. width: 100%;
  1086. height: auto;
  1087. padding-top: 10px;
  1088. color: #858585;
  1089. font-size: 18px;
  1090. line-height: 22px;
  1091. text-align: center;
  1092. }
  1093. /*品牌实力部分结束*/
  1094. </style>