<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>卡片-专题</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      img {
        vertical-align: middle;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      html,
      body {
        background: white;
      }

      body {
        font-family: "PingFangSC-Regular", "PingFang SC";
        position: relative;
        /* background-color: rgb(0, 48, 204); */
        /* height: 1000px; */
      }

      .container {
        background: url("https://app-stc.zjol.com.cn/card-share/subject/banner.png")
            no-repeat top center / 100% auto,
          linear-gradient(175deg, #f6f6f6 0%, #f6f6f6 100%) no-repeat top
            34.6667vw left / 100% calc(100% - 34.6667vw);
        overflow: hidden;
        padding: 34.6667vw 5.0667vw 0;
        position: relative;
      }

      .card {
        background-color: white;
        padding: 4vw;
        padding-bottom: 29.8667vw;
        border-radius: 1.6vw;
        box-shadow: 0px 2px 4px 0px rgba(234, 234, 234, 0.74);
      }

      .date {
        font-family: PingFangSC, PingFang SC;
        font-weight: 300;
        font-size: 3.2vw;
        color: #151515;
        line-height: 4.5333vw;
        text-align: center;
      }

      .logo {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: auto;
      }

      .abstract {
        margin-top: 3.2vw;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 3.7333vw;
        color: #151515;
        line-height: 6.4vw;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        white-space: pre-wrap;
      }

      .title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 4.8vw;
        color: #151515;
        line-height: 6.4vw;

        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .parting-line {
        background-color: #ededed;
        margin-top: 4.2667vw;
        margin-bottom: 4.2667vw;
        height: 1px;
      }

      .bottom {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        margin-top: 6.6667vw;
      }

      .cover {
        width: 40vw;
        /* height: 21.0667vw; */
        border-radius: 1.6vw;
        overflow: hidden;
      }

      .cover-img {
        height: auto;
      }

      .bottom .qr-area {
        display: flex;
        height: 11.7333vw;
      }

      .bottom .qr-area .left {
        align-self: flex-end;
        margin-right: 1.6vw;
        font-size: 3.2vw;
        line-height: 4.8vw;
        color: #999;
      }

      .bottom .qr-area .right {
        position: relative;
        width: 11.7333vw;
        height: 11.7333vw;
      }

      .qr-area .right .qr {
        position: absolute;
        left: 0;
        top: 0;
      }

      .qr-area .right .qr-logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 3.2vw;
        height: 3.2vw;
        border: 1px solid #fff;
        border-radius: 0.8vw;
      }
    </style>
    <script src="https://app-stc.zjol.com.cn/qrious.min.js"></script>
  </head>

  <body>
    <div class="container">
      <div class="card">
        <div class="date"></div>
        <div class="abstract"></div>
        <div class="parting-line"></div>
        <h1 class="title"></h1>
        <div class="bottom">
          <div class="cover"><img class="cover-img" /></div>
          <div class="qr-area">
            <div class="left">长按识别<br />查看详情</div>
            <div class="right">
              <img class="qr" />
              <img
                class="qr-logo"
                src="https://app-stc.zjol.com.cn/card-share/card_logo1.png"
              />
            </div>
          </div>
        </div>
      </div>
      <img
        class="logo"
        src="https://app-stc.zjol.com.cn/card-share/abstract_footer.png"
      />
    </div>
    <script>
      // 二维码
      const qrEl = document.querySelector(
        "body > div.container > div > div.bottom > div.qr-area > div.right > img.qr"
      );
      if (typeof QRious !== "undefined") {
        new QRious({
          element: qrEl,
          value: "https://www.baidu.com",
          foreground: "#183081",
          level: "M",
          size: 200,
        });
      }

      if (window.ZBJTJSBridge && typeof ZBJTJSBridge.invoke === "function") {
        window.getNewsDetailCallback = function (res) {
          const resObj = JSON.parse(res) || {};
          const article = resObj.data;
          if (article) {
            const dateEl = document.querySelector(
              "body > div.container > div > div.date"
            );
            const published_at =
              article.doc_type == 8 ? article.live_start : article.published_at;
            if (published_at) {
              const days = [
                "星期天",
                "星期一",
                "星期二",
                "星期三",
                "星期四",
                "星期五",
                "星期六",
              ];
              const date = new Date(published_at);
              const dayOfWeek = days[date.getDay()];
              dateEl.textContent = `${date.getFullYear()}-${String(
                date.getMonth() + 1
              ).padStart(2, "0")}-${String(date.getDate()).padStart(
                2,
                "0"
              )} ${String(date.getHours()).padStart(2, "0")}:${String(
                date.getMinutes()
              ).padStart(2, "0")} ${dayOfWeek}`;
            }

            const cover = document.querySelector(
              "body > div.container > div > div.bottom > div.cover > img"
            );
            const pic = article.list_pics ? article.list_pics[0] : "";
            if (!!pic) {
              cover.src = pic;
              cover.style.display = "block";
            } else {
              cover.style.display = "none";
            }

            const title = document.querySelector(
              "body > div.container > div > h1"
            );
            title.textContent = article.list_title || article.doc_title;

            const abstractEl = document.querySelector(
              "body > div.container > div > div.abstract"
            );
            abstractEl.textContent = article.summary;

            // 二维码
            const qrEl = document.querySelector(
              "body > div.container > div > div.bottom > div.qr-area > div.right > img.qr"
            );
            if (typeof QRious !== "undefined") {
              new QRious({
                element: qrEl,
                value: article.url,
                foreground: "#183081",
                level: "M",
                size: 200,
              });
            }
          }
          delete window.getNewsDetailCallback;
        };
        ZBJTJSBridge.invoke("getNewsDetail", "", "getNewsDetailCallback");
      }
    </script>
  </body>
</html>


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>卡片-小图</title>
    <style>
       * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html {
        background: white;
      }

      body {
        font-family: "PingFangSC-Regular", "PingFang SC";
      }

      img {
        vertical-align: middle;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .wrapper {
        padding: 9.0667vw 8vw 0;
      }

      .wrapper .logo {
        width: 33.6vw;
        height: 12.5333vw;
        margin: 0 auto;
        background: url("https://app-stc.zjol.com.cn/card-share/new_card_logo.png") no-repeat center / contain;
      }

      .wrapper .cover {
        width: 84vw;
        min-height: 21vw;
        margin-top: 6.9333vw;
        background: #f1f1f1 url("https://app-stc.zjol.com.cn/card-share/blank_bg.png") no-repeat center / 9vw 9vw;
      }

      .wrapper h1 {
        margin-top: 3.7333vw;
        color: #151515;
        font: 500 6.4vw / 9.0667vw "PingFangSC-Medium", "PingFang SC";
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
      }

      .bottom {
        position: relative;
        height: 40.5333vw;
        margin: 5.8667vw -8vw 0;
        background: url("https://app-stc.zjol.com.cn/card-share/small_card_bottom.png") no-repeat center / contain;
      }

      .bottom .date {
        position: absolute;
        top: -1.0667vw;
        left: 8vw;
        font-size: 3.7333vw;
        color: #999;
      }

      .bottom .legend {
        position: absolute;
        left: 8vw;
        bottom: 8.8vw;
        height: 6.9333vw;
        line-height: 6.9333vw;
        font-size: 3vw;
        color: #151515;
        border-bottom: 1px solid rgba(20, 20, 20, 0.5);
      }

      .bottom .qr-area {
        display: flex;
        position: absolute;
        right: 8vw;
        bottom: 8.8vw;
        height: 14.4vw;
      }

      .bottom .qr-area .left {
        align-self: flex-end;
        margin-right: 1.0667vw;
        font-size: 3.2vw;
        color: #999;
      }

      .bottom .qr-area .right {
        position: relative;
        width: 14.4vw;
        height: 14.4vw;
      }

      .qr-area .right .qr {
        position: absolute;
        left: 0;
        top: 0;
      }

      .qr-area .right .qr-logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 4vw;
        height: 4vw;
        border: 1px solid #fff;
        border-radius: 3px;
      }
    </style>
    <script src="https://app-stc.zjol.com.cn/qrious.min.js"></script>
  </head>
  <body>
    <div class="wrapper">
      <div class="logo"></div>
      <div class="cover">
        <img />
      </div>
      <h1></h1>
      <div class="bottom">
        <div class="date"></div>
        <div class="legend">深耕浙江 解读中国 影响世界</div>
        <div class="qr-area">
          <div class="left">长按识别<br />查看详情</div>
          <div class="right">
            <img class="qr" />
            <img class="qr-logo"
              src="https://app-stc.zjol.com.cn/card-share/card_logo1.png" />
          </div>
        </div>
      </div>
    </div>
    <script>
      if (window.ZBJTJSBridge && typeof ZBJTJSBridge.invoke === "function") {
        window.getNewsDetailCallback = function (res) {
            const resObj = JSON.parse(res) || {};
            const article = resObj.data;
            if (article) {
              const coverWrapperEl = document.querySelector(".wrapper .cover");
              const coverEl = document.querySelector(".cover img");
              const titleEl = document.querySelector(".wrapper h1");
              const dateEl = document.querySelector(".date");
              const qrEl = document.querySelector(".qr-area .qr");
              if (typeof QRious !== 'undefined') {
                new QRious({
                  element: qrEl,
                  value: article.url,
                  foreground: "#183081",
                  level: "M",
                  size: 200,
                });
              }
              const item = article.card_list.find(item => item.category === 0);
              if (item && item.image_url) {
                coverEl.onerror = function (e) {
                  this.style.display = 'none';
                }
                coverEl.src = item.image_url;
                const search = item.image_url.split('?')[1]
                if (search) {
                  const params = new URLSearchParams(search)
                  const width = params.get('width')
                  const height = params.get('height')
                  if (width && height) {
                    coverWrapperEl.style.height = height / width * (document.documentElement.offsetWidth / 100 * 84) + 'px'
                  }
                }
              }
              titleEl.textContent = article.list_title;
              const published_at = article.doc_type == 8 ? article.live_start : article.published_at
              if (published_at) {
                const date = new Date(published_at);
                dateEl.textContent = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")} ${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
              }
            }
            delete window.getNewsDetailCallback;
          };
          ZBJTJSBridge.invoke("getNewsDetail", "", "getNewsDetailCallback");
      }
    </script>
  </body>
</html>

<div align="center" style="text-align: left;">
 <img src="https://app-stc.zjol.com.cn/assets/20230609/1686291571006_6482c473d0ff8e0001f72267.jpeg?width=523&amp;height=360" style="max-width: 640px; display: initial; clear: both; margin: 0px;" oldsrc="W020230609514850844327.jpg" type="app_image">
</div>
<p style="text-align: left;">“轧神仙”是千年吴文化的活态传承，是“大运河姑苏民俗文化旅游节”的重要组成部分。6月3日，以“千年文脉熠生辉，繁华石路展盛景”为主题的2023“大运河姑苏民俗文化旅游节·轧神仙”活动落下帷幕。三天时间，众多市民游客来到石路商圈“轧闹猛”，商圈总营业额突破千万，这个“苏州人自己的节日”无疑已经成了姑苏大运河文化展示的一张特色名片。<br></p>
<p style="text-align: left;">线下巡游的热闹回归，沉浸式的昆曲表演走进商圈，各类市集升腾繁华烟火气……回顾这三天，民俗、童趣、商贸三大板块精彩纷呈的系列活动，在让市民游客感受到浓浓节日氛围的同时，也让文化IP成为石路商圈经济发展“新爆点”，为石路商圈聚力引流。</p>
<p style="text-align: left;"><strong>吴地生辉 织就江南文脉</strong></p>
<p style="text-align: left;">“轧神仙”起源于南宋，拥有八百多年历史，已列入国家级非物质文化遗产名录。“八仙巡游”是“轧神仙”活动的经典项目。今年，巡游队伍回归线下，由真人装扮的“八仙”一亮相，就在石路商圈掀起了热潮。市民紧跟队伍，找机会与“八仙”握手、合影，实在挤不上去，碰碰“神仙”们的衣角，也能乐开花。市民阮健抱着女儿，跟随着巡游队伍，“小时候，我的父亲带着我‘轧神仙’，也是这么热闹，开心得不得了，今天我特意带着女儿从新区过来，让她也感受一下我们苏州传统民俗的乐趣。”阮健说。在传统巡游队伍之外，汉服秀等巡游方阵的加入，也让市民倍感欣喜。</p>
<p style="text-align: left;">6月2日，一场与“八仙”之一吕洞宾相关的昆曲《邯郸梦》，在苏州华贸中心紫芝园上演，让人沉醉的吴侬软语，悠扬婉转。今年的“轧神仙”活动，推出沉浸式演出，将紫芝园的亭台楼阁、水榭长廊，变成昆曲、评弹等戏曲演出的“舞台”，让传统戏曲与园林空间相互交融，让“轧神仙”成为一张雅俗共赏的文化名片，市民游客走走停停沉浸其中，充分品味江南文化之美。</p>
<p style="text-align: left;">值得一提的是，紫芝园是与拙政园同期的名园，曾有“较诸江左名园，未知谁胜”的赞誉，但在明末清初时毁于一场大火。为传承苏州园林文化，苏州华贸中心原址“复活”由文徵明布画，仇英藻饰的紫芝园。如今落成的紫芝园，沿用了《紫芝园记》中东雅堂、五老峰、迎旭轩、隔尘亭、浮白亭、窥壑洞等旧时名称，紫芝园里池光澄澄，氤氲缭绕，如若旧时之境。</p>
<p style="text-align: left;">今年的“轧神仙”巧遇“六一”国际儿童节，主办方推出“童眼看民俗”文旅研学活动与“寻觅仙踪 轧福添意”寻根文旅体验活动，邀请亲子家庭，打卡“轧神仙”主题文旅线路，细品“老苏州”对“轧”魅力的独特解读。福济观位于阊门内下塘街132号，俗称神仙庙，元至大四年（1311年）重建时，才改称福济观。直到明景泰年间再建时，设吕仙祠。文化导师在此为孩子们讲述着吕洞宾以及八仙的传奇故事，并一起共读诗词《姑苏竹枝词》。“石路好婆”志愿巡查队负责人胡丽华带着孩子们和家长从石路社区党群服务中心出发，沿途“打卡”了此行必“轧”之地：文创非遗市集、神仙庙、神仙花草市集等。据悉，此次创新研发的文旅研学项目和寻根文旅体验活动，旨在以“文旅+研学”的形式，推动非遗文化的活态传承与创新发展，展现江南文化的独特魅力。</p>
<p style="text-align: left;"><strong>活力赋新 品味市井繁华</strong></p>
<p style="text-align: left;">逛市集是“轧神仙”活动的传统习俗。每逢“轧神仙”，老苏州都习惯买几盆“神仙花草”，把“仙气”带回家。在苏州演艺中心广场，超过120个售卖“神仙花草”的摊位，吸引了众多人气，清新雅致的小型盆景、小巧可爱的多肉植物、色彩各异的盆栽花卉，无不吸引着人们的眼球。“老苏州”张培福一早赶到花草集市“轧闹猛”，“‘轧神仙’这几天的花草，特别有灵气，能讨个好彩头。”绣球花、月季花、茉莉花……张培福一口气买了5盆花花草草，准备将“仙气”带回家。据统计，活动期间，花草市集总营业额近百万元。</p>
<p style="text-align: left;">“栀子花、白兰花……”夏日里，这句吴侬软语的叫卖声是苏州人儿时最难忘的回忆。除了设置花草市集，活动期间，主办方还邀请了“三花栽培技艺”以及“三花茶窨制技艺（玳玳花茶、茉莉花茶、白兰花茶窨制技艺）”非遗传承人黄剑，通过实物陈列、宣传普及等活动形式，为市民游客提供“花香伴茶香”的一站式“三花”文化体验。</p>
<p style="text-align: left;">“神仙糕”是苏州人在活动期间必吃的美食。在老字号黄天源的摊位前，购买“神仙糕”的市民络绎不绝，市民刘宏一下子买了100多元的“神仙糕”：“每年都要来买点回去跟家人分享，大家一起沾沾仙气。”据苏州黄天源食品有限公司负责人介绍，为了满足市民需要，近几日，糕团师傅每日都要制作2000块糕点，每块糕点价格在3元至4元不等。据悉，早在2019年，金阊街道就联合黄天源将“轧神仙”的Logo运用于“神仙糕”上。今年还创新研发了水果口味“神仙糕”、“轧神仙”冰激凌，助力老字号创新发展。</p>
<p style="text-align: left;">今年的“轧神仙”活动，在保留民间手工艺展、中医药展等传统民俗展示展销的同时，还在石路步行街开展了潮流市集、非遗文创市集、街头艺人表演等文化潮流活动，并联合姑苏区人社局开展“神仙送‘才’”青年人才招聘市集，通过活动吸引年轻群体参与。在“神仙送‘才’”市集现场，来自制造、医疗、文化、建筑等领域的企业设立摊位，通过展板、宣传单等方式向求职者介绍单位概况、岗位需求等信息，“一对一”与求职者展开初步交流，方便求职者深入了解岗位情况，快速达成就业意向。“把传统的招聘会升级成人才夜市，很贴近年轻人的生活方式，也解决了我们想换个工作但没时间应聘的问题。”江西小伙李鹏表示，“轧神仙”逛夜市，还能和招聘企业深入交流一下，为自己谋划一个全新的未来。“这样的人才服务让我们有些意外和惊喜，我对扎根姑苏发展更有信心和底气了。”</p>
<p style="text-align: left;"><strong>聚有引力 助力商圈蝶变</strong></p>
<p style="text-align: left;">近年来，为了在民俗文化舞台上，唱好“经济戏”，金阊街道每年在精心组织各项民俗文化活动的同时，积极引导和推动企业走向节庆活动的前台，成为经济大戏的主角，通过文商旅融合，实现文化遗产保护与经济发展的双赢。</p>
<p style="text-align: left;">在今年“轧神仙”的开幕式上，主办方以“舞台路演+大屏展览”的形式，进行了石路商圈“金企匠心”联盟企业的新品发布，生动介绍了“八仙祥瑞”方巾、“暗香疏影”二胡、“八面玲珑”灯具等六件新品的样式设计和创作内涵。同时，围绕石路商圈提档升级，现场还发布了“石路上城门”“演艺中心改造”“京东石路旗舰店”等五大重点项目，描绘出一幅繁华昌盛的商贸新图景。</p>
<p style="text-align: left;">据悉“上城门”项目建设也融入了“轧神仙”民俗文化元素。“上城门”项目位于姑苏区石路步行街29号，1至7楼建筑面积13500平方米，计划投资规模2亿元。项目依托百年石路和《姑苏繁华图》阊门外的盛况，力争打造集网红新零售、早咖夜酒、文创、餐饮、酒店等业态以及古城观景平台等功能于一体的文旅垂直街区。设计方案中，城门、园林等苏州古城特有元素清晰可辨，在灯光和绿植的点缀下，整栋建筑古朴却不失活力，充满掇山般的自然趣味。“在建设过程中，项目还将充分融入苏州‘轧神仙’民俗文化，布置蕴含‘八仙’元素的景观和装饰，打造多样化文旅产品，让游人沉浸式体验一出‘寻仙记’。”项目主要投资方、苏州挺好玩文化商业发展有限公司负责人徐挺表示，引入沉浸式业态不仅有助于传播古城特有的历史文化，还能够带动古城经济发展，提振消费活力。</p>
<p style="text-align: left;">积极引导企业参与，今年的“轧神仙”活动还启动了“团建助企·姑苏有料”石路商圈青春探店和“繁华金阊门·数币惠石路”神仙消费月活动。活动主办方联合姑苏团区委发放近千张消费券，并组织石路天虹、石路国际商城等规模企业以及绣娘、老万年等辖区重点文化企业开展优惠让利活动。此外，各大商家也陆续推出数币满减、数币优惠购等补贴活动，让市民尽享实惠的同时，为石路聚集了更多人气。</p>
<p style="text-align: left;">据悉，今年以来，金阊街道不断积蓄石路商圈发展动能，结合时令及文化特色，每月开展应时应景的主题活动，已陆续开展“石路万物生”潮流市集、“石路有逛头”元宵灯市、“石路寻品味”春季美装美食节活动，带动消费，提振商圈经济，助力商圈蝶变。</p><p class="zrbja">孙璐</p>

民俗文化“活”起来 商圈经济“火”起来

据悉，今年以来，金阊街道不断积蓄石路商圈发展动能，结合时令及文化特色，每月开展应时应景的主题活动，已陆续开展“石路万物生”潮流市集、“石路有逛头”元宵灯市、“石路寻品味”春季美装美食节活动，带动消费，提振商圈经济，助力商圈蝶变。