Untitled
unknown
plain_text
10 days ago
13 kB
4
Indexable
<!-- Recommended Result Section --> <v-container v-if="isGotRecommendedProducts"> <v-card :elevation="$vuetify?.breakpoint?.smAndDown ? 0 : 3" :style="{ margin: $vuetify?.breakpoint?.smAndDown ? '0' : '0 10rem', }" > <v-row class="d-flex justify-center"> <v-col cols="12" sm="10" md="10" lg="10"> <div :class="[ $vuetify.breakpoint.xs ? 'text-body-2' : 'text-subtitle-1', ]" > <div class="sake-brewery-small-logo__container mx-auto mb-8"> <v-img :src="SakeBreweryTopLogo" alt="sake brewery name(i.e., sakagura)" contain > </v-img> </div> <h2 class="mb-6 mt-4 font-weight-bold text-center green-heading-text" > あなたのタイプ </h2> <div> <div> <p class="random-comment"> {{ `${tasteProfileDetails.comment}` }} </p> </div> <div class="pattern-type"> <div> <p>{{ tasteProfileDetails.name }}</p> </div> <v-img :src="getImagePath(tasteProfileDetails.name)" :alt="getImagePath(tasteProfileDetails.name)" height="20rem" contain ></v-img> </div> </div> <div class="mb-2 text-center"> <h2 class="green-heading-text mb-6 mt-2 mt-md-4 font-weight-bold" > タイプの特徴 </h2> <v-row justify="center"> <v-col cols="auto" class="d-flex flex-column align-center" > <ul class="taste-characteristics"> <li v-for="( item, index ) in tasteProfileDetails.characteristics" :key="index" class="text-center mb-4" > * {{ item }} </li> </ul> </v-col> </v-row> </div> <div> <p class="mt-3 mt-md-4 pa-4 profile-explanation" style="background-color: #dfedc9" > {{ tasteProfileDetails.explanation }} </p> <v-divider></v-divider> <template> <v-container> <v-row class="d-flex justify-end"> <v-dialog v-model="showFeedbackTextArea" max-width="600px" > <v-card> <v-card-title> <span> <v-icon v-if="thumbsUp" >mdi-thumb-up-outline</v-icon > <v-icon v-else>mdi-thumb-down-outline</v-icon> </span> フィードバック <v-spacer></v-spacer> <!-- <v-menu bottom left> <template v-slot:activator="{ on, attrs }"> <v-btn icon v-bind="attrs" v-on="on"> <v-icon>mdi-dots-vertical</v-icon> </v-btn> </template> </v-menu> --> </v-card-title> <v-card-text class="pb-0"> <v-textarea v-model="feedbackText" name="positive feedback" outlined auto-grow :placeholder=" thumbsUp ? 'ご意見やご要望がございましたら、お気軽にお知らせください。' : 'ご意見やご要望がございましたら、お気軽にお知らせください。' " ></v-textarea> </v-card-text> <v-card-actions class="py-4"> <v-spacer></v-spacer> <v-btn color="#006934" @click="proceedWithFeedbackText" dark > 送信 </v-btn> </v-card-actions> </v-card> </v-dialog> <v-btn color="#006934" class="ma-2" dark icon @click="handleThumbsUp" > <v-icon>{{ thumbsUp ? "mdi-thumb-up" : "mdi-thumb-up-outline" }}</v-icon> </v-btn> <v-btn color="#006934" class="ma-2" dark icon @click="handleThumbsDown" > <v-icon>{{ thumbsDown ? "mdi-thumb-down" : "mdi-thumb-down-outline" }}</v-icon> </v-btn> </v-row> </v-container> </template> </div> <div class="d-flex flex-column align-center justify-center"> <v-chip-group v-for="(values, type) in testProfileTypes" :key="type" class="me-1 me-sm-2 text-center" column multiple > <div class="text-center"> <!-- Taste Category Types Heading --> <h2 v-if=" type == 'tasteCategoryTypes' && values.length > 0 " :class="[$vuetify.breakpoint.xs ? 'mb-2' : 'mb-0']" class="green-heading-text mb-2 font-weight-bold text-center" > おすすめの日本酒の味 </h2> <!-- Manufacturing Category Types Heading --> <h2 v-if=" type == 'manufacturingCategoryTypes' && values.length > 0 " :class="[$vuetify.breakpoint.xs ? 'mb-2' : 'mb-0']" class="green-heading-text mb-2 font-weight-bold text-center" > おすすめの日本酒の種類 </h2> <!-- Chips --> <div :class="[ 'mb-6 d-flex flex-wrap justify-center align-center font-weight-bold', $vuetify?.breakpoint?.smAndDown ? 'flex-column' : '', ]" > <v-chip v-for="value in values" :key="value" outlined small :class="[$vuetify.breakpoint.xs ? 'small' : '']" class="ma-1 px-4 py-2" style="font-size: 17px" > {{ value }} </v-chip> </div> </div> </v-chip-group> </div> </div> </v-col> </v-row> <div v-for="(allProducts, category) in recommendedProducts" :key="category" > <h2 class="mb-6 my-4 text-center green-heading-text"> 菊水のおすすめ </h2> <v-row class="d-flex justify-center mx-1"> <v-col v-for="product in allProducts" :key="product?.item_id" cols="12" sm="10" md="11" lg="11" > <ProductCard :id="product?.item_id" :name="product?.title" :item_image="product?.image_url" :price="product?.price" :description="product?.description" :tasteType="[product?.flavour_type.join('・')]" :ingredientType="[product?.variant.join('・')]" :volume="product?.volume" :volumeVariant="product?.volume_variant" :childItems="allChildItems?.[product?.item_id]" :recommendedWayToDrink="product?.recommended_way_to_consume" :recommendedJapaneseFood="product?.japanese_food" :recommendedWesternFood="product?.western_food" :recommendedChineseAndEthnicFood=" product?.chinese_and_ethnic_food " :recommendedSweetsAndFruit="product?.sweets_and_fruit" /> </v-col> </v-row> </div> <div> <v-row class="d-flex justify-center align-center my-8" dense> <v-btn class="mx-2" :small="$vuetify.breakpoint.smAndDown" color="#355b91" dark @click="shareOnFacebook" > <v-icon left>mdi-facebook</v-icon> シェア </v-btn> <v-btn class="mx-2" :small="$vuetify.breakpoint.smAndDown" color="#398bb1" dark @click="shareOnTwitter" > <v-icon left>mdi-twitter</v-icon> ツイート </v-btn> <v-btn :small="$vuetify.breakpoint.smAndDown" class="mx-2" color="#309c43" dark @click="shareOnLine" > <v-icon left>mdi-chat-outline</v-icon> LINEで送る </v-btn> </v-row> </div> <div> <v-row class="d-flex justify-center align-center"> <v-col cols="12" md="10" lg="10"> <v-btn class="mt-12 mb-10 py-6 font-weight-medium" @click="resetSurvey" rounded dark block color="#006934" :small="$vuetify?.breakpoint?.smAndDown" :style="{ fontSize: $vuetify?.breakpoint?.smAndDown ? '18px' : '23px', }" > <b>もう一度診断する</b> </v-btn> </v-col> </v-row> </div> </v-card> <v-footer class="footer-section" app fixed> <div style="width: 100%; background-color: #b6afab"> <p class="text-center py-4 ma-0"> Produced by Taste & Aroma Strategic Research Institute Co.,Ltd. </p> </div> </v-footer> </v-container>
Editor is loading...
Leave a Comment