<template>
    <div class="common-box">
        <div class="fc-b fw-b fz-24"> {{roleInfo.tasData.title}} </div>
        <div class="fc-b fz-16 flex jc-e mt-1 mr-3"> {{roleInfo.tasData.time}} </div>
        <div class="mt-3 flex ai-c jc-c">
            <img :src="roleInfo.tasData.src" style="width: 600px;" />
        </div>
        <div class="fz-16 mt-3 ta-l fc-b label" >{{roleInfo.tasData.label}}</div>
    </div>
</template>
<script>
import { defineComponent, reactive, onMounted, toRefs, watch } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
  name: "Index",
  components: {},
  props: ["lisdata"],
  setup(props, context) {
    let data = reactive({
        roleInfo:{
            tasData: props.lisdata
        }
        
    });
    watch(
      () => props.lisdata,
      (newVal, oldVal) => {
        console.log('newValwwww', newVal)
        data.roleInfo.tasData  = newVal
      }
    );
    const router = useRouter();
    onMounted(() => {
        console.log('newww', props.lisdata)
    });
    let methods = {};
    return {
      ...methods,
      ...toRefs(data),
    };
  },
});
</script>

<style scoped>
.common-box {
    width: 800px;
    background: #ffffff;
    box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    padding: 34px 20px;
}
.label{
    line-height: 30px;
    text-indent: 2em;
}

</style>
