点击展开收起
<template>
<view class="c">
<view class="Cmain">
<view class="home" v-cloak>
<view class="home-title">常见疾病</view>
<view class="menu" v-for="(item, index) in medicalList" :key="index" >
<view class="main" >
<!-- 疾病标题 -->
<view class="title" @click="getShow(item)">
<image src="../../static/icon/ill.png" mode="widthFix"></image>
{{item.title}}
</view>
<!-- 疾病症状、原因、基本处理方法 -->
<view class="dropdown" v-show = "item.show">
<view class="text">症状：<view class="tt">{{item.symptom}}</view></view>
<view class="text">原因：<view class="tt">{{item.reason}}</view></view>
<view class="text">基本处理方法：<view class="tt">{{item.processingMethod}}</view></view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
show:false,
medicalList:[
{
title:'1.腹泻',
symptom:'小肠腹泻的表现是粪便量增多以及排便频率轻微增加，每天大概有3到5次，宠物排便毫不费力。狗狗可能还会出现呕吐以及体重减轻的问题。通常还伴有气体产生过多，有时我们甚至还可以听到气在肚子里的隆隆声。如果粪便里有血，说明它经过肠道消化并呈黑色。因为腹泻，狗狗无法正常吸收营养物质，所以就会导致它们的体重会减轻，毛发干枯易断。动物体内有一种微小的蛋白叫做白蛋白，它的作用就像海绵，能够使正常量的水分保存在血管中。当发生腹泻时，白蛋白随着粪便排出体外而大量丢失，血中的白蛋白减少，使水分从血管中渗出而积聚在其他部位，那么就会发展成腿部水肿，胸水以及腹水。大肠腹泻包括结肠和直肠疾病，能引起宠物每天都有少量的软便排出，通常每天超过5次，宠物排便有些困难。如果粪便中有血，颜色为红色。大便可能有粘糊糊的粘液。宠物不常呕吐而且体重也不会减轻。',
reason:'消化不良，着凉，菌群不平衡，感染病毒，暴饮暴食、换粮这些情况都可能导致狗狗腹泻，尤其是幼犬',
processingMethod:'禁食12-24小时，给予肠道充分休息;用益生菌调节肠道的菌群平衡;到药房买思密达喂食，起到物理性的止泻作用;注意保暖，防止受寒。若做了以上处理后，狗狗还没好转，须立即送医。',
show:false
},
{
title:'2.异食癖',
symptom:'狗狗吃一些异常的物品，如泥土，墙皮，石头等统称为异食癖',
reason:'一般来说异食癖只要由于缺乏微量元素一起',
processingMethod:'可通过营养补充来调节。',
show:false
},
{
title:'3.感冒',
symptom:'精神不好，打蔫，喜欢趴着;有流水样的鼻涕，打喷嚏和咳嗽;眼结膜充血，流泪，食欲不振;体温升高，一般为39-40℃',
reason:'受凉，多见于洗澡后，天气变化，长期吹空调;病毒感染;被传染感冒病毒',
processingMethod:'抗病毒滴剂、紫雏菊花粉、免疫多糖膏、抗病毒冲剂、板蓝根;促进血液循环，保暖，热敷肚子。若不见好妆，及时就医。',
show:false
},
{
title:'4.严重掉毛',
symptom:'大量掉毛',
reason:'幼犬更换胎毛会引起掉毛，季节性换毛时也会掉毛，怀孕生产因为激素分泌，可能会引起母狗的大量掉毛',
processingMethod:'有些不正常的情况也会导致大量掉毛。同时，皮肤过于干燥，如饮食不均衡，未摄入足够的油脂，洗浴方式、洗浴用品不当等均会导致狗狗皮肤干燥，掉皮屑，甚至掉毛。患有皮肤病，如感染了细菌、真菌以及螨虫，也会引起掉毛，这种掉毛需要送医院检查确诊皮肤病。',
show:false
},
{
title:'5.呕吐',
symptom:'狗狗容易呕吐跟其身体特点有关系：胃部与地面平行，没有重力的束缚，很容易呕。',
reason:'剧烈的运动后或者情绪激动时，会因食物刺激(吃太快、过凉、过硬、采食过多)后呕吐，属于正常生理现象。犬肠道的益生菌数量、种类与人类相比较少，不能适应食物变化，也容易引起食物不适用导致的呕吐。生病状态(如患有胃肠炎、寄生虫)也会引发呕吐。',
processingMethod:'少吃多餐，饭后不能剧烈运动，及时补充益生菌，不喝牛奶，及时驱虫，对照症状找到呕吐的病因及时用药或就医。',
show:false
},
]
};
},
methods:{
// 点击标题下拉展示
getShow(item){
// console.log(item)
item.show=!item.show;
},
goPage(url){
uni.navigateTo({
url
})
},
},
}
</script>
<style lang="scss">
/* body, main::before{
background: url("https://lupic.cdn.bcebos.com/20191203/3016047015_14.jpg") 0 / cover fixed;
} */
body,.Cmain::before{
background: url("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1818218419,1317735897&fm=26&gp=0.jpg") 0 / cover fixed;
}
.Cmain{
width: 90%;
min-height: 90vh;
line-height: 2;
position: relative;
margin:30upx 5% ;
padding:30upx 0;
border-radius: 20upx;
background: rgba(184, 170, 163, .7);
box-shadow: 3upx 3upx 6upx 3upx rgba(0, 0, 0, .3);
overflow: hidden;
.home {
.home-title {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
line-height: 50upx;
font-size: 35upx;
font-weight: 500;
padding-bottom: 15upx;
}
.menu{
border-radius:80upx;
border: 1px solid #e8e6e1;
padding:30upx;
margin: 50upx 30upx;
.title {
display: flex;
flex-direction: row;
color: #fff;
line-height: 50upx;
font-size: 33upx;
image {
width:50upx;
padding-right: 30upx;
}
}
.dropdown{
.text{
margin: 10upx auto;
color: #707070;
.tt {
color: #333;
font-size: 28upx;
text-indent: 2em;
margin:5upx auto;
}
}
}
}
}
}
.Cmain::before{
content: '';
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
filter: blur(20upx);
z-index: -1;
margin: -30upx;
}
</style>
另一种是：
<template>
<view>
<view class="Express" >
<view class="info">
<view :class="{hide:!iSinfo}">
{{text}}
<text @tap="showinfo" v-if="iSinfo" class="hidebtn">收起</text>
</view>
<text @tap="showinfo" v-if="!iSinfo">展开</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
iSinfo: false,
text:'禁食12-24小时，给予肠道充分休息;用益生菌调节肠道的菌群平衡;到药房买思密达喂食，起到物理性的止泻作用;注意保暖，防止受寒。若做了以上处理后，狗狗还没好转，须立即送医。'
}
},
methods: {
showinfo() {
this.iSinfo = !this.iSinfo
}
}
}
</script>
<style lang="scss">
page {
background-color: #fff;
}
.Express {
display: flex;
flex-direction: column;
background-color: #fff;
padding: 30upx;
position: relative;
.info {
display: flex;
flex-direction: column;
view {
text-align:justify ;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(102, 102, 102, 1);
word-break: break-word; //换行模式
background-color: #fff;
}
text {
width: 70px;
font-size: 14px;
display: flex;
justify-content: flex-end;
align-items: center;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%);
color: #000000;
position: absolute;
bottom: 30upx;
right: 30upx;
}
}
}
.hidebtn {
display: flex;
flex: 1;
justify-content: flex-end;
color: #000000;
font-size: 14px;
}
.hide {
word-break: break-word; //换行模式
overflow: hidden;
text-overflow: ellipsis; //修剪文字
display: -webkit-box;
-webkit-line-clamp: 1; //此处为上限行数
-webkit-box-orient: vertical;
}
</style>
2881
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
