<template v-for="(p, index) in cd.content" :key="index">
<p><strong>:</strong> <strong style="color: #49a12f">{{ p.percent }} / 100</strong> {{ p.result }}</p>
<template v-if="p.result">
<div class="chart">
<svg class="percent" viewBox="0 0 42 42" fill="none">
<circle cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
<text fill="#49a12f" x="21" y="26">96</text>
<circle cx="21" cy="21" r="15.91549430918954" stroke="#bfc3c6"></circle>
<circle v-for="{percent, dash} in cd.content" cx="21" cy="21" r="15.91549430918954" stroke="#49a12f" :stroke-dasharray="`${percent} ${dash}`" stroke-dashoffset="25"></circle>
</svg>
</div>
</template>
<template v-else>
<img src="/src/caseimg/coming_soon.png" loading='lazy' alt="coming soon">
</template>
</template>[10:42:22] Starting 'imgmin'...
[10:42:23] Finished 'imgmin' after 345 msconst cache = require('gulp-cached');
const
imagemin = require('gulp-imagemin'),
imageminMozjpeg = require('imagemin-mozjpeg'),
imageminOptipng = require('imagemin-optipng'),
// imageminPngquant = require('imagemin-pngquant'),
imageminSvgo = require('imagemin-svgo'),
imageminWebp = require('imagemin-webp'),
newer = require('gulp-newer');
let img_bf_min = './build/src/*',
img_af_min = './src/test/';
gulp.task('imgmin', () => {
return gulp.src(img_bf_min)
.pipe(newer(img_bf_min))
.pipe(cache(imagemin([
imageminOptipng({
optimizationLevel: 5
}),
imageminMozjpeg({
progressive: true
}),
imageminSvgo({
plugins: [
{removeViewBox: false},
]
}),
imageminWebp({
quality: 50
})
], {
verbose: true
})))
.pipe(gulp.dest(img_af_min))
});