<template>
  <div class="w-1200px mt-20px flex justify-between">
    <div class="w-860px h-full bg-white px-30px pt-30px pb-50px">
      <div class="flex mb-30px">
        <img class="w-400px h-400px object-cover mr-20px" src="/imgs/product_item.png" />

        <div>
          <div class="font-thin text-size-20px leading-28px mb-20px">
            这里是产品名称这里是产品名称这里是
          </div>
          <div class="font-normal text-[#686868] text-size-14px leading-20px mb-44px">
            这里是文章简介或摘要内容，这里是文章简介或摘要内容这里是文章简介或摘要内容，这里是文章简介
          </div>
          <div class="flex items-start mb-42px">
            <div
              class="font-normal text-[#686868] text-size-14px leading-20px w-70px whitespace-nowrap"
            >
              购买说明：
            </div>
            <div class="font-normal text-size-14px leading-20px">
              购买说明内容购买说明内容购买说明内容购买说明 购买说明内容购买说明内容内容
            </div>
          </div>
          <div class="flex items-center mb-33px">
            <div
              class="font-normal text-[#686868] text-size-14px leading-20px w-70px whitespace-nowrap"
            >
              价格：
            </div>
            <div class="text-primary text-size-36px font-light">￥99.00</div>
          </div>
          <div class="flex items-center mb-33px">
            <div
              class="font-normal text-[#686868] text-size-14px leading-20px w-70px whitespace-nowrap"
            >
              数量：
            </div>
            <div>
              <el-input-number></el-input-number>
            </div>
            <div class="font-normal text-[#686868] text-size-14px">
              <span class="ml-20px">{{ $t("件") }}</span>
              <span class="ml-20px">{{ $t("有货") }}</span>
            </div>
          </div>
          <div class="flex justify-center">
            <el-button @click="$router.push('order-detail')" class="!text-white !w-200px !h-40px !bg-primary" round>{{
              $t("立即购买")
            }}</el-button>
          </div>
        </div>
      </div>
      <ui-devider></ui-devider>
      <div class="text-size-24px mt-36px mb-34px">产品详情</div>
      <div class="product-intro" v-html="html"></div>
    </div>
    <div class="w-320px">
      <ui-swiper
        class="mb-20px"
        :items="[
          { url: 'imgs/article_cover1.png', title: '这是标题' },
          { url: 'imgs/article_cover1.png', title: '这是标题' },
        ]"
        titleClass="swiper-title"
      ></ui-swiper>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      html: `<p><span style="font-size:16px">据央视新闻7月22日消息，俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所。</span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p><span style="font-size:16px"><img alt="" src="/imgs/article-detail-pic-1.png" style="width:100%" /></span></p>

<p>&nbsp;</p>

<p><span style="font-size:16px">据央视新闻7月22日消息，俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所。</span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p><span style="font-size:16px">另据央视新闻报道称，当地时间21日，欧洲理事会公布了针对俄罗斯的新制裁措施，包括禁止进口来自俄罗斯金和珠宝；增加了俄罗斯可用于军用的物资和技术禁运清单，增加了对俄罗斯个人和实体的制裁。俄军打击乌军指挥所 乌军击退俄军进攻</span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p><span style="font-size:16px">俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所，在顿涅茨克和尼古拉耶夫等地摧毁了多个乌军弹药库。另外，俄军还击落乌空军1架苏-25战机、1架米-8直升机和5架军用无人机。</span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p><span style="font-size:16px">另据乌克兰国家通讯社21日援引乌各地军事部门的消息报道，俄军继续对苏梅、哈尔科夫、卢甘斯克、顿涅茨克等地区进行大规模炮击。在乌军阻击下，俄军未能在巴赫穆特方向取得突破，没有占领乌格列戈尔斯克发电厂。</span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p><span style="font-size:16px">俄外长称在乌军事目标发生变化，与西方向乌军提供武器有关。</span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p><span style="font-size:16px"><img alt="" src="/imgs/article-detail-pic-1.png" style="width:100%" /></span></p>

<p>&nbsp;</p>

<p><span style="font-size:16px">据央视新闻7月22日消息，俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所。</span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p><span style="font-size:16px">另据央视新闻报道称，当地时间21日，欧洲理事会公布了针对俄罗斯的新制裁措施，包括禁止进口来自俄罗斯金和珠宝；增加了俄罗斯可用于军用的物资和技术禁运清单，增加了对俄罗斯个人和实体的制裁。俄军打击乌军指挥所 乌军击退俄军进攻</span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p><span style="font-size:16px">俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所，在顿涅茨克和尼古拉耶夫等地摧毁了多个乌军弹药库。另外，俄军还击落乌空军1架苏-25战机、1架米-8直升机和5架军用无人机。</span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p><span style="font-size:16px">另据乌克兰国家通讯社21日援引乌各地军事部门的消息报道，俄军继续对苏梅、哈尔科夫、卢甘斯克、顿涅茨克等地区进行大规模炮击。在乌军阻击下，俄军未能在巴赫穆特方向取得突破，没有占领乌格列戈尔斯克发电厂。</span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p><span style="font-size:16px">俄外长称在乌军事目标发生变化，与西方向乌军提供武器有关。</span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>


`,
    };
  },
};
</script>

<style lang="scss" scoped></style>
