<template>
    <div class="demo-page">
        <p>那么仔细想一想，其实在浏览器渲染的时候，它就知道了元素是否在视窗之内，自身面积有多少在视窗之内。所以最高效的方式就是预先告诉浏览器当目标元素和视窗重叠的时候，我们要搞事情，然后等着浏览器执行回调函数即可。出于这种考虑，W3C 提出了那么仔细想一想，其实在浏览器渲染的时候，它就知道了元素是否在视窗之内，自身面积有多少在视窗之内。所以最高效的方式就是预先告诉浏览器当目标元素和视窗重叠的时候，我们要搞事情，然后等着浏览器执行回调函数即可。出于这种考虑，W3C 提出了那么仔细想一想，其实在浏览器渲染的时候，它就知道了元素是否在视窗之内，自身面积有</p>
        <hActivePcard
            vendor="绿色蔬菜"
            title="小森饼屋 香松牛奶脆皮软心牛角包皮软心牛角包100g/袋 3袋/份 9片/份"
            preSaleDate="2月28日"
            pickUpDate="2月30日"
            :saled="30"
            :totle="120"
            :limit="1"
            price="9.9"
            marketPrice="59.9"
            status="WAITING"
            wantBuy="200"
            :cartCount="cartCount"
            @cart-add="handleAdd"
            @cart-reduce="handleReduce"
            presellText="04月13日10点99份开抢"
            :video="video"
            cover="https://front-xps-cdn.xsyx.xyz/2020/07/09/23524852.jpg"
            liveType="living"
        />
        <hActivePcard
            vendor="绿色蔬菜"
            title="小森饼屋 香松牛奶脆皮软心牛角包皮软心牛角包100g/袋 3袋/份 9片/份"
            preSaleDate="2月28日"
            pickUpDate="2月30日"
            :saled="30"
            :totle="120"
            :limit="1"
            price="9.9"
            marketPrice="59.9"
            status="ACTIVE"
            wantBuy="200"
            :cartCount="cartCount"
            @cart-add="handleAdd"
            @cart-reduce="handleReduce"
            presellText="04月13日10点99份开抢"
            :video="video1"
            cover="https://front-xps-cdn.xsyx.xyz/2020/07/09/23524852.jpg"
            liveType="living"
        />
        <hActivePcard
            vendor="绿色蔬菜"
            title="小森饼屋 香松牛奶脆皮软心牛角包皮软心牛角包100g/袋 3袋/份 9片/份"
            preSaleDate="2月28日"
            pickUpDate="2月30日"
            :saled="30"
            :totle="120"
            :limit="1"
            price="9.9"
            marketPrice="59.9"
            status="OVER"
            wantBuy="200"
            :cartCount="cartCount"
            @cart-add="handleAdd"
            @cart-reduce="handleReduce"
            presellText="04月13日10点99份开抢"
            :video="video"
            cover="https://front-xps-cdn.xsyx.xyz/2020/07/09/23524852.jpg"
            liveType="living"
        />
        <p>那么仔细想一想，其实在浏览器渲染的时候，它就知道了元素是否在视窗之内，自身面积有多少在视窗之内。所以最高效的方式就是预先告诉浏览器当目标元素和视窗重叠的时候，我们要搞事情，然后等着浏览器执行回调函数即可。出于这种考虑，W3C 提出了那么仔细想一想，其实在浏览器渲染的时候，它就知道了元素是否在视窗之内，自身面积有多少在视窗之内。所以最高效的方式就是预先告诉浏览器当目标元素和视窗重叠的时候，我们要搞事情，然后等着浏览器执行回调函数即可。出于这种考虑，W3C 提出了那么仔细想一想，其实在浏览器渲染的时候，它就知道了元素是否在视窗之内，自身面积有多少在视窗之内。所以最高效的方式就是预先告诉浏览器当目标元素和视窗重叠的时候，我们要搞事情，然后等着浏览器执行回调函数即可。出于这种考虑，W3C 提出了那么仔细想一想，其实在浏览器渲染的时候，它就知道了元素是否在视窗之内，自身面积有多少在视窗之内。所以最高效的方式就是预先告诉浏览器当目标元素和视窗重叠的时候，我</p>
    </div>
</template>

<script>
import hActivePcard from './index.vue'
export default {
    name: "button-demo",
    data() {
        return {
            cartCount: 0,
            video1: 'http://image.xsyxsc.com/videoList/20200707/100percent_8baff6fd-dcda-4cfa-8323-2d84893ee97e1594113546681.mp4',
            video: 'https://front-xps-cdn.xsyx.xyz/2020/07/29/253412452.mp4'
        }
    },
    components: {
        hActivePcard
    },
    methods: {
        handleAdd( data, param ) {
            this.cartCount = data.cart + 1;
        },
        handleReduce( data, param ) {
            this.cartCount = data.cart - 1;
        }
    }
}
</script>
<style>
.demo-page {
    padding: 10px;
    background: #A70702;
    height: 100%;
}
</style>